【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)
事件(onload)
*注意点：
- 变量加var局部变量，不加var全局变量
- setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
返回值：返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行
- style="display:none" （隐藏元素）
●display:none和visible:hidden都能把网页上某个元素隐藏起来。
但两者有区别:
●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
（参考）https://zhidao.baidu.com/question/569829578.html
- style="display:block" （显示元素）
- 不支持绑定多个事件，不要那么做！
步骤分析：
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
代码实现
JS部分
1 <script> 2 function init() { 3 // //案例二：书写轮播图片显示的定时操作(3秒) 4 // window.setInterval("changeImg()", 3000); //window可以省略不写 5 6 //案例三：1.设置显示广告图片的定时操作 7 //这里不能加var:加var局部变量，不加var全局变量 8 time=setInterval("showAd()", 3000); 9 } 10 11 //书写函数 12 var i = 0; 13 function changeImg() { 14 i++; 15 //获取图片位置并设置src属性值 16 document.getElementById("img1").src = "../img/" + i + ".jpg"; 17 if (i == 2) { 18 i = 0; 19 } 20 } 21 22 //2.书写显示广告图片的函数 23 function showAd(){ 24 //3.获取广告图片位置 25 var adEle=document.getElementById("img2"); 26 //4.修改元素里面的属性让其显示 27 adEle.style.display="block"; 28 //5.清除显示图片的定时操作 29 clearInterval(time); 30 //6.设置隐藏图片的定时操作 31 time=setInterval("hiddenAd()",3000); 32 33 } 34 //7.书写隐藏图片的函数 35 function hiddenAd(){ 36 //8.获取图片位置并设置style属性的display值为none 37 document.getElementById("img2").style.display="none"; 38 //9.清除隐藏图片的定时操作 39 clearInterval(time); 40 } 41 42 </script>
html部分
<body onload="init()">
<!--定时弹出广告图片位置--> <!--display:none 隐藏元素--> <img src="../img/middle01.jpg" width="100%" style="display:none" id="img2"/>
结果：
