BOM心得-定时器

写在前面的话:之前一直以为定时器的返回值是Object类型,所以timer初始化也是写null,今天发现返回值是number,进而发觉这个返回值代表的是定时器的索引,指代这是第几个定时器

个人觉得只用set/clearInterval方法就好,他可以实现另外的一个方法的所有功能

启用定时器的方法有两种:

一、setInterval(,)

周期性的执行函数体,这个方法如果不主动停止的话,会一直执行
第一个参数是执行的函数体,一般传入有函数名的函数方法或匿名方法,非常不建议直接传入函数执行体,代码可读性会很差,应该也没人会这样做吧
第二个参数是周期时间,单位是毫秒

二、setTimeout(,)

在指定的时间之后执行函数体,如果有输出,也会不间断输出
第一个参数也是要被执行的函数体
第二个参数是指定的延迟时间,单位是毫秒

停止定时器的方法:

一、clearclearInterval()

停止由 setInterval() 方法调用的定时器
提前定义一个变量(一般用timer)接收setInterval(),执行结束后直接把变量传入 clearInterval()

二、clearTimeout()

使用方法同上

 <script>

         window.onload = function () {

             //需求:点击关闭,广告栏消失,用定时器添加渐变效果

             var timer = 0;

             var ad = document.getElementsByClassName('ad')[0];

             var a = ad.children[0].firstElementChild || ad.children[0].firstChild;

             a.onclick = function () {

                 //设置定时器

                 timer = setInterval(function() {

                     ad.style.opacity -= 0.1;

                     //透明度为0后,隐藏广告栏,清除定时器

                     if (ad.style.opacity <= 0) {

                         ad.style.display = "none";

                         clearInterval(timer);

                     }

                 },50);

             }

             var ad_both = document.body.children;

             setTimeout(function() {

                 ad_both[1].style.display = "none";

                 ad_both[2].style.display = "none";

             },5000);

             clearTimeout(timer);

         }

     </script>

 </head>

 <body>

     <div class="top_banner">

         <div class="nav">导航栏</div>

         <div class="ad w" style="opacity: 1;">  <!--这里不懂,不是行内式的时候,有bug-->

             <div class="close_ad">

                 <a href="#">×</a>

             </div>

         </div>

         <div class="search w"></div>

     </div>

     <div class="ad_l">我将于5秒后自动消失</div>

     <div class="ad_r">我将于5秒后自动消失</div>

 </body>

巴特西

BOM心得-定时器

启用定时器的方法有两种:

一、setInterval(,)

二、setTimeout(,)

停止定时器的方法:

一、clearclearInterval()

二、clearTimeout()

最新文章

热门文章