倒计时广告关闭案例实现 js js小技巧
效果
做这个背景缘由
看 pink 老师的视频时候讲到了 5秒之后自动关闭,然后弹幕有句话就说怎么做倒计时的广告呢,然后就花了10多分钟写了一下,东西不难,大盒子套小盒子,图片当成背景图片,全填充,相对位置的简单试错。
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#bigbox {
width: 500px;
height: 500px;
background: url(image/img5.jpg) no-repeat;
margin: 10px auto;/* 横轴居中 */
background-size: 100% 100%; /*背景图充满盒子*/
color: white;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
}
#right {
float: right;
display: none;
margin-right: 10px;
margin-top: 5px;
}
.close {
cursor: pointer;
}
</style>
</head>
<body>
<div id="bigbox">
<div>
<span id="left">剩余 <span id="time">5</span> S</span>
<span id="right" class="close">X关闭</span>
</div>
</div>
<script type="text/javascript">
var time = document.getElementById("time");
var realtime = time.innerHTML;
var close = document.querySelector('.close');
var bigBox = document.getElementById("bigbox");
//设置定时器 多次触发,所以用 setInterval
var timer = setInterval(daojishi, 1000);
function daojishi(){
realtime--;
time.innerHTML = realtime;
if (realtime <= 0) {
close.style.display = 'block';
// clearTimeout(timer); //虽然可以混用,但是不建议,会造成歧义
clearInterval(timer);
}
}
//关闭按钮事件
close.onclick = function () {
bigBox.style.display = 'none';
}
</script>
</body>
</html>