js实现倒计时广告效果
2019-12-23 本文已影响0人
Yin先生
页面上经常弹出一些广告，过了几秒之后才出现关闭广告按钮（或者关闭按钮才可点）或者剩余指定时间才给你跳过广告（其实从用户的角度看，这个效果挺烦人的哈哈哈），效果大概如下图：
js实现倒计时广告效果.gif
实现思路：
1.布局
2.倒计时,每间隔一段时间改变秒数,setInterVal
3.改变秒数的内容（5，4，3，2，1）...
4.时间减到零的时候，停止定时器，clearInterVal，显示关闭按钮X
5.点击关闭按钮X 隐藏广告内容
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 500px;
height: 500px;
background: url(./1.png);
margin: 10px auto;
background-size:100% 100%;
color: black;
}
p{
padding-top: 5px;
display: block;
}
#left{
float: left;
}
#right{
float: right;
display: none;
}
</style>
</head>
<body>
<div id="box">
<p>
<span id="left">
剩余
<span id="t">5</span>
S
</span>
<span id="right">X关闭</span>
</p>
</div>
<script type="text/javascript">
var time = document.getElementById("t").innerHTML;
var close = document.getElementById("right");
var bigBox = document.getElementById("box");
var timer = setInterval(function(){
time--;
document.getElementById("t").innerHTML = time;
if(time<=0){
close.style.display = 'block';
clearTimeout(timer);
}
},1000);
close.onclick = function(){
bigBox.style.display = 'none';
}
</script>
</body>
</html>
