通过js调用计时器，并自动弹出消息框。
通过js调用计时器，并自动弹出消息框。
Html代码：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="win.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="main.css" />
</head>
<body onload="window_onload();">
<form id="form1" runat="server">
<div id="win">
<div id="title">
消息提醒<span id="close"> X</span></div>
<div id="con">
消息内容</div>
</div>
</form>
</body>
</html>
Css样式：
Code
#win
{
border:solid 1px red;
height:100px;
width:220px;
position:absolute;
bottom: -150px;
right:20px;
display:none;
}
#title
{
background-color:Blue;
color:White;
padding-left:5px;
}
#title #close
{
margin-left:100px;
cursor:pointer;
}
#con
{
padding:30px 0px 0px 30px;
}
js：Code
$(function(){
$("#win").css("opacity", 0);
$("#close").click(hide);
});
function showwin(){
//找到所对应的div节点
var win=$("#win");
//让该窗口显示出来
win.css("display","block");
//从下往上慢慢升起
win.animate({
bottom: "-1px",
opacity: 1
},1000);
}
function hide()
{
//找到所对应的div节点
var win=$("#win");
//让该窗口隐藏起来
win.animate({
bottom: "-150px",
opacity: 0
},1000);
}
function window_onload()
{
window.setTimeout("getRimd()",10000);
}
function getRimd()
{
showwin();
window_onload();
}
Html代码：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="win.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="main.css" />
</head>
<body onload="window_onload();">
<form id="form1" runat="server">
<div id="win">
<div id="title">
消息提醒<span id="close"> X</span></div>
<div id="con">
消息内容</div>
</div>
</form>
</body>
</html>
Css样式：
Code#win
{
border:solid 1px red;
height:100px;
width:220px;
position:absolute;
bottom: -150px;
right:20px;
display:none;
}
#title
{
background-color:Blue;
color:White;
padding-left:5px;
}
#title #close
{
margin-left:100px;
cursor:pointer;
}
#con
{
padding:30px 0px 0px 30px;
}
js：
Code$(function(){
$("#win").css("opacity", 0);
$("#close").click(hide);
});
function showwin(){
//找到所对应的div节点
var win=$("#win");
//让该窗口显示出来
win.css("display","block");
//从下往上慢慢升起
win.animate({
bottom: "-1px",
opacity: 1
},1000);
}
function hide()
{
//找到所对应的div节点
var win=$("#win");
//让该窗口隐藏起来
win.animate({
bottom: "-150px",
opacity: 0
},1000);
}
function window_onload()
{
window.setTimeout("getRimd()",10000);
}
function getRimd()
{
showwin();
window_onload();
}
知识在于积累，成功始于勤奋
