倒计时广告关闭案例实现 js js小技巧
Posted 雾恋过往
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了倒计时广告关闭案例实现 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>
以上是关于倒计时广告关闭案例实现 js js小技巧的主要内容，如果未能解决你的问题，请参考以下文章