html广告倒计时代码 js实现倒计时广告效果

页面上经常弹出一些广告，过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看，这个效果挺烦人的哈哈哈)，效果大概如下图：

js实现倒计时广告效果.gif

实现思路：

1.布局

2.倒计时,每间隔一段时间改变秒数,setInterVal

3.改变秒数的内容(5，4，3，2，1)...

4.时间减到零的时候，停止定时器，clearInterVal，显示关闭按钮X

5.点击关闭按钮X 隐藏广告内容

代码：

#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;

}

剩余

5

S

X关闭

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';

}