定时弹出广告
Posted yisennnn
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定时弹出广告相关的知识,希望对你有一定的参考价值。
定时器(BOM-window对象)
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后,只执行一次
清除定时器:
clearInterval(id):
clearTimeout(id):
步骤分析:
1.html页面,先把广告隐藏
2.页面加载成功事件 onload
3.编写函数
定时器
<html> <head> <meta charset="UTF-8"> <title></title> <style> .ad{ display: none; width: 100%; } </style> </head> <body> <div> show ad </div> <div id="ad" class="ad"> <img src="../img/ad_.jpg"/> </div> </body> <script> //记录次数 var i = 0; //定时器id var timer; onload = function(){ //设置定时器,间隔4秒展示图片 timer = setInterval(showAd,4000); } //展示广告方法 function showAd(){ //展示的次数+1 i++; //若i=3清空由setInterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var adobj = document.getElementById("ad"); //2.修改广告的样式将其显示 adobj.style.display ="block"; //3.2秒之后隐藏,只执行一次 setTimeout(hidAd,2000); } //隐藏广告 function hidAd(){ //1.获取广告 var adobj = document.getElementById("ad"); //2.修改广告的样式将其隐藏 adobj.style.display = "none"; } </script> </html>
操作元素:
document.getElementById("")
操作css属性:
document.getElementById("id").style.属性=“值”
属性:就是css中属性,css属性有“-” 例如:background-color
若有“-” 只需将“-”删除,后面第一个字母变大写即可。
<html> <head> <meta charset="UTF-8"> <title></title> <script> //点击按钮之后,给id为divid的元素添加边框背景色宽高 function btncli(){ //1.获取元素 var obj = document.getElementById("divid"); //2.操作元素 obj.style.backgroundColor = "black"; obj.style.border = "1px solid red"; //添加宽高 obj.style.height = "100px"; obj.style.width = "100px"; } </script> </head> <body> <input type="button" value="将div加上样式" onclick="btncli()"/> <div id="divid" ></div> </body> </html>
注意:
只要是window对象的属性和方法,可以把window省略
window.onload == onload
window.setInterval() == setInterval()
以上是关于定时弹出广告的主要内容,如果未能解决你的问题,请参考以下文章