定时弹出广告

179 阅读1分钟

这是我参与2022首次更文挑战的第16天,活动详情查看:2022首次更文挑战

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>

\

文章来自本人博客