倒计时5S秒自动关闭弹窗
程序员文章站
2022-07-05 15:35:37
弹窗文字内容 x 倒计时s自动关闭 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{position:relative;height:800px;}
#wrap{width:300px;height:200px;background:#fafafa;box-shadow:5px 5px 5px #c9c9c9;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;}
#close{position:absolute;right:0;font-size:20px;right:15px;top:5px;cursor:pointer;}
.txt{max-height:100px;padding-top:30px;text-align:center;line-height:150px;}
.tip{position:absolute;bottom:0;text-align:center;border-top:1px solid #ccc;padding:6px 0;width:100%;}
#time{color:red;}
</style>
</head>
<body>
<div id="wrap">
<div class="txt">弹窗文字内容</div>
<div id="close">x</div>
<div class="tip">倒计时<span id="time"></span>s自动关闭</div>
</div>
<script>
window.onload=function(){
var box=document.getelementbyid("wrap");
var obj=document.getelementbyid("time");
var close=document.getelementbyid("close");
var num=10;
obj.innerhtml=num;
function timfn(){
num--;
obj.innerhtml=num;
if(num == 0){
box.style.display="none";
}
}
setinterval(timfn,1000);
close.onclick=function(){
box.style.display="none";
}
}
</script>
</body>
</html>
上一篇： 谁还没个牵手的