定时弹出广告

JS定时器详解

最新推荐文章于 2019-06-09 14:38:09 发布

fulisha_la

最新推荐文章于 2019-06-09 14:38:09 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fulishafulisha/article/details/84782832

商场项目设计知识点专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解了Window对象的setInterval()和setTimeout()方法，详细解释了如何利用这些方法实现网页上的定时操作，如定时显示和隐藏广告图片。通过具体实例展示了如何在页面加载时设置定时器，以及如何在回调函数中使用clearInterval()和setTimeout()控制广告图片的显示与隐藏。

Window 对象方法

1.setInterval（）:可按照指定的周期（以毫秒计）来调用函数或计算表达式

所以setInterval（para1,para2）第一个参数就是调用的函数或计算机表达式；第二个参数是设置的时间间隔

注：如果不对setInterval加以控制，这setinterval则会一直调用函数如果要取消则可以直接使用clearInterval()方法(由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数，所以我们在使用这个方法时，，那么这个返回的值要设置为全局变量)

2.setTimeout():从字面就可以理解，在指定的时间退出，其参数和setInterval类似，但是他和setInterval的区别在于他只执行一次就直接退出，如果要多次调用，请使用 setInterval() 或者让回调函数自身再次调用 setTimeout()。

通过例子来看：

在商城首页设置一个定时弹出的广告。

其步骤：1.导入相关的jquery文件

2.书写页面加载函数，在页面加载函数中，获取显示广告图片的元素，设置定时操作

3.设置定时操作调用的函数

4.将定时操作删除掉，然后设置定时操作（隐藏广告图片）

5.书写定时操作隐藏函数

5.清除定时操作

相关代码：

<!-- 页面定时广告图片 -->
<img src="img/ad.jpeg" width="250" height="100" style="display: none" id="ad"/>

<script type="text/javascript">
	//书写页面加载函数
	$(function(){
	//var time;---设置的局部变量
	//显示广告的定时操作
	time=setInterval("showAd()",3000);
		});
	//书写回调函数----显示广告图片
	function showAd(){			
	//获取广告图片，并让其显示，使用淡入效果
	$("#ad").fadeIn(3000);
	//清楚显示的定时操作
	clearInterval(time);
	//time=setInterval("hideAd()",3000)-----可以使用setTimeOut（）,这样就可以不用再调用clearInterval()
        time=setTimeout("hideAd()",3000)
	}
	//书写隐藏广告图片
	function hideAd(){
	$("#ad").fadeOut(3000);
	//清除隐藏图片的定时操作
	//clearInterval(time);
	}
</script>