写在前面的话:之前一直以为定时器的返回值是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心得-定时器的更多相关文章

  1. BOM以及定时器

    一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...

  2. 13 -1 BOM和定时器

    一 BOM JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元 ...

  3. BOM心得

    Brower Objects Model浏览器对象模型 ps: 到现在也没个正式标准.............. window是BOM的顶级对象,但一般可以省略 一.Location对象 相当于浏览器 ...

  4. BOM之定时器

    JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用. 一     s ...

  5. JS中定时器的返回数值ID值

    定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...

  6. web前端面试第一次[定时器]

    BOM中定时器--计时器 定时器参数两个:(函数,时间(单位ms(1000ms=1s))) 时间设置1s,每过1s执行一次函数 //设置定时器 setInterval(funtion(){ alert ...

  7. 前端3 — js — BOM没完（ 不了解也行 ）

    1.js是什么? -- 英文全称javascript javaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚 ...

  8. Web前端学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. 关于web前端的学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

随机推荐

  1. Java解决小孩围圈问题

    问题描述:一堆小孩围成一个圈,从第一个小孩开始数,每数到第三个便把第三个孩子删去,数到只剩一个小孩为止,并求该孩子的具体编号. 解决办法 1. package test; public class C ...

  2. Working with the Dynamic Type in C#

    Working with the Dynamic Type in C# https://www.red-gate.com/simple-talk/dotnet/c-programming/workin ...

  3. 把Swift中的String转成NSString ，获取NSString的方法

    1.0 在Swift中的 String 并没有提供什么方法,直接把它自身转变成 Int .Float 等,而在OC中我们就可以这样  "123".integerValue 来获取它 ...

  4. centos6 7 yum安装mongodb 3.6

    配置MongoDB的yum源 # 编辑文件 vim /etc/yum.repos.d/mongodb-org-3.6.repo # 添加以下内容 [mongodb-org-3.6] name=Mong ...

  5. Java多线程及线程状态转换

    以下内容整理自:http://blog.csdn.net/wtyvhreal/article/details/44176369 线程:是指进程中的一个执行流程.  线程与进程的区别:每个进程都需要操作 ...

  6. the type java.io.ObjectInputStream cannot be resolved. It is indirectly......

    问题的原因: 配置tomcat7.0的时候自己设置了jre的版本1.8,而没有用myeclipse10自带的jre1.6,导致了出现了差错! 两种解决的办法: 1.点击windows--->pr ...

  7. Redis原子计数器incr

    一.前言在一些对高并发请求有限制的系统或者功能里,比如说秒杀活动,或者一些网站返回的当前用户过多,请稍后尝试.这些都是通过对同一时刻请求数量进行了限制,一般用作对后台系统的保护,防止系统因为过大的流量 ...

  8. versionCode & versionName

    [versionCode & versionName] Android的版本可以在androidmainfest.xml中定义,主要有android:versionCode和android:v ...

  9. Python __init__ 特殊方法

    在Python中有很多以双下划线开头且以双下划线结尾的固定方法.他们会在特定的时机被触发执行. __init__ 就是其中之一,它会在实例化之后自动被调用.以完成实例的初始化. >>> ...

  10. JMeter学习（十二）分布式部署（转载）

    转载自 http://www.cnblogs.com/yangxia-test Jmeter 是java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发用户时,使用单台机器模拟所有 ...