码迷,mamicode.com
首页 > 其他好文 > 详细

广告弹窗关闭倒计时

时间:2017-12-16 14:54:33      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:int   gpo   get   top   abs   set   border   opacity   win   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
#beiJ {
width:100%;
height:100%;
background:#000;
opacity:0.7;
position:fixed;
top:0;
left:0;
}
#tanChuang {
width:800px;
height:400px;
position:fixed;
top:50%;
left:50%;
margin:-200px 0 0 -400px;
background:#222;
box-shadow:0px 0px 20px #111;
color:#fff;
}
#jiShi {
width:180px;
height:180px;
border:10px solid #fff;
border-radius:50%;
margin:100px auto;
font-size:150px;
font-weight:bold;
font-family:"arial";
text-align:center;
line-height:180px;
position:absolute;
top:0%;
left:calc(50% - 100px);
}
#tanChuang img {
width:100%;
height:100%;
}
#tanChuang span {
width:40px;
height:40px;
font-size:40px;
position:absolute;
top:0;
right:0;
cursor:pointer
}

</style>
</head>

<body>

<div style="width:100%; height:100%; background:url(http://www.jq22.com/img/cs/500x300-2.png)">
<div id="beiJ"></div>
<div id="tanChuang">
<img src="http://www.jq22.com/img/cs/500x300-1.png" >
<div id="jiShi"></div>
<span id="sp">×</span></div>
</div>

<script>

window.onload = function() {
var obj = document.getElementById("jiShi");
var sp = document.getElementById("sp");
var beiJ = document.getElementById("beiJ");
var tanChuang = document.getElementById("tanChuang");

var i = 30;
obj.innerHTML = i;
var a = setInterval(timeFn, 1000);

function timeFn() {
i--;
obj.innerHTML = i;
if (i == 0) {
clearInterval(a);
beiJ.style.display = "none";
tanChuang.style.display = "none";
}
}
sp.onclick = function() {
beiJ.style.display = "none";
tanChuang.style.display = "none";
}
}

 

</script>

</body>
</html>

广告弹窗关闭倒计时

标签:int   gpo   get   top   abs   set   border   opacity   win   

原文地址:http://www.cnblogs.com/gyc51/p/8046293.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!