关于js的小知识：使用JS定时弹出广告

原创于 2017-04-09 17:38:13 发布 · 696 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一种使用JavaScript实现网页广告轮播效果的方法。通过设置定时器来控制广告的显示与隐藏，利用CSS控制元素的可见性。具体实现包括使用setInterval与setTimeout设置重复与一次性的定时任务，并在适当的时候通过clearInterval与clearTimeout取消定时任务。

准备工作：

1.JS的定时操作

setInterval();

setTimeout();

clearInterval();

clearTimeout();

2.CSS控制显示和隐藏的属性

display:

block:显示

none:隐藏

代码实现：

<script>
    var time;
	function init(){
		//设置定时操作
		time=setInterval("showAd()",5000);
	}
	
	function showAd(){
		//获得div元素
		var divAd=document.getElementById("divAd");
		divAd.style.display="block";
		//消除之前的定时操作
		clearInterval(time);
		//重新设置一个定时：5秒钟隐藏
		time=setInterval("hideAd()",5000);
	}
	
	function hideAd(){
		//获得div元素
		var divAd=document.getElementById("divAd");
		divAd.style.display="none";
		clearInterval(time);
	}
	</script>