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

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

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

一、setInterval(,)

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

二、setTimeout(,)

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

停止定时器的方法:

一、clearclearInterval()

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

二、clearTimeout()

  • 使用方法同上
  1.  <script>
  2.          window.onload = function () {
  3.              //需求:点击关闭,广告栏消失,用定时器添加渐变效果
  4.              var timer = 0;
  5.              var ad = document.getElementsByClassName('ad')[0];
  6.              var a = ad.children[0].firstElementChild || ad.children[0].firstChild;
  7.  
  8.              a.onclick = function () {
  9.                  //设置定时器
  10.                  timer = setInterval(function() {
  11.                      ad.style.opacity -= 0.1;
  12.                      //透明度为0后,隐藏广告栏,清除定时器
  13.                      if (ad.style.opacity <= 0) {
  14.                          ad.style.display = "none";
  15.                          clearInterval(timer);
  16.                      }
  17.                  },50);
  18.              }
  19.  
  20.              var ad_both = document.body.children;
  21.              setTimeout(function() {
  22.                  ad_both[1].style.display = "none";
  23.                  ad_both[2].style.display = "none";
  24.              },5000);
  25.              clearTimeout(timer);
  26.          }
  27.      </script>
  28.  </head>
  29.  <body>
  30.      <div class="top_banner">
  31.          <div class="nav">导航栏</div>
  32.          <div class="ad w" style="opacity: 1;">  <!--这里不懂,不是行内式的时候,有bug-->
  33.              <div class="close_ad">
  34.                  <a href="#">×</a>
  35.              </div>
  36.          </div>
  37.          <div class="search w"></div>
  38.      </div>
  39.      <div class="ad_l">我将于5秒后自动消失</div>
  40.      <div class="ad_r">我将于5秒后自动消失</div>
  41.  </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. winform 凹进去的button

    如果是工具栏按钮的话,可以设置CheckState属性为CheckState.Checked,这样就是按下状态了如果是普通按钮的话,有两种方法一种是系统提供的,在工具箱上右键,[选择项],然后在[CO ...

  2. How to fix the bug “Expected "required", "optional", or "repeated".”？

    参考:https://github.com/tensorflow/models/issues/1834 You need to download protoc version 3.3 (already ...

  3. yii2.0 添加组件baidu ueditor

    下载uditor git clone https://github.com/BigKuCha/yii2-ueditor-widget.git 将下载的项目放到 common/wdigets目录上 修改 ...

  4. ubuntu下没有ping命令

    root@node2:/# apt-get install inetutils-ping

  5. cakePHP的ajax弹出窗

    在html里添加一个触发弹出框的按钮 $("#button1").on("click", function() { $("#dialogue" ...

  6. 渲染Keynote

    [渲染Keynote] 1.渲染图元(rendering primitives),可以是点.线.三角. 2.显卡对于显存的访问速度更快,而且大多数显卡对于RAM没有直接的访问权利 . 3.裁剪(Cli ...

  7. Python爬虫使用MD5加密的坑

    由于公司的业务需要,需要爬取很多的国外网站图片,然后兄弟我一路正则杀过去,总共匹配到658张链接,心里美滋滋开始写下载的代码.然后就有了这次坑的记录. 首先这是我查到的链接数量 然后爬虫跑完后,美滋滋 ...

  8. Android设置ScrollView回到顶部的三种方式 (转)

    一.ScrollView.scrollTo(0,0)  直接置顶,瞬间回到顶部,没有滚动过程,其中Y值可以设置为大于0的值,使Scrollview停在指定位置; 二.ScrollView.fullSc ...

  9. 第二章 向量（d4）有序向量：二分查找（改进）

  10. json 相关知识

    一:json标准格式: 标准JSON的合法符号:{(左大括号)  }(右大括号)  "(双引号)  :(冒号)  ,(逗号)  [(左中括号)  ](右中括号) JSON字符串:特殊字符可在 ...