JavaScript实现流氓小广告效果

我们在浏览网页的时候，经常会遇到各种各样的垃圾弹窗，当你把它关闭之后，过一段时间他又弹出来，非常的让人心烦。这种流氓弹窗我们是可以通过JavaScript的 setTimeout() 方法来实现的。

<style>

#ad{

width: 400px;

height: 300px;

display: none;

background-color: #ddd;

position: fixed;

right: 0;

bottom: 0;

}

#close{

float: right;

width: 24px;

height: 24px;

line-height: 24px;

text-align: center;

cursor: pointer;

color: #fff;

}

</style>

</head>

<body>

<p>

<span>s之后自动关闭广告</span>

</p>

</div>

//获取对象

function get(id){

return document.getElementById(id) ;

}

//调用函数获取对象

var oAd = get('ad') ;

var oTime = get('time') ;

var oClose = get('close') ;

showAd() ;

//封装函数弹窗广告

//分析：这时候有两种方法关闭倒计时 1.广告结束； 2.点击关闭

function showAd(){

setTimeout(function (){

//显示弹窗广告

oAd.style.display = 'block' ;

//设置一个倒计时

var t = setInterval(function (){

//如果倒计时结束，弹窗广告关闭

oTime.innerHTML--;

//判断倒计时是否结束

if(oTime.innerHTML < 0){

//关闭弹窗

oAd.style.display = 'none' ;

//清除倒计时

clearInterval(t) ;

//广告关闭以后，下次还是10s

oTime.innerHTML = 10 ;

//3s之后弹出小广告

showAd() ;

}

},1000)

//点击X关闭

oClose.onclick = function() {

//关闭弹窗广告

oAd.style.display = 'none' ;

//清除计时器

clearInterval(t);

//广告关闭后，下次还是10s

oTime.innerHTML = 10 ;

showAd()

}

},3000)

}

</script>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64299.shtml