使用JavaScript完成定时弹出广告
程序员文章站
2022-03-20 15:37:09
完成页面定时弹出广告 需求分析 一般网页,当我们刚打开的时候,它会5秒之后,显示一个广告,让我们看5秒钟,然后他的广告就自动消失了! 技术分析 定时器 setInterval : 每隔多少毫秒执行一次函数 setTimeout: 多少毫秒之后执行一次函数 clearInterval clearT ......
完成页面定时弹出广告
需求分析
一般网页,当我们刚打开的时候,它会5秒之后,显示一个广告,让我们看5秒钟,然后他的广告就自动消失了!
技术分析
- 定时器
setinterval : 每隔多少毫秒执行一次函数
settimeout: 多少毫秒之后执行一次函数
clearinterval
cleartimeout
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"
步骤分析
- 确定事件: 页面加载完成的事件 onload
- 事件要触发函数: init()
- init函数里面做一件事:
- 启动一个定时器 : settimeout()
- 显示一个广告
- 再去开启一个定时5秒钟之后,关闭广告
代码实现
<script> function init(){ settimeout("showad()",3000); } function showad(){ //首先要获取要操作的img var img = document.getelementbyid("img1"); //显示广告 img.style.display = "block"; //再开启定时器,关闭广告 settimeout("hidead()",3000); } function hidead(){ //首先要获取要操作的img var img = document.getelementbyid("img1"); //隐藏广告 img.style.display = "none"; } </script>
扩展
-
js的文件加载顺序问题
-
js的引入方式
引入一个外部js文件
<script src="js文件的路径" type="text/javascript"/>