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心得-定时器的更多相关文章
- BOM以及定时器
一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...
- 13 -1 BOM和定时器
一 BOM JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元 ...
- BOM心得
Brower Objects Model浏览器对象模型 ps: 到现在也没个正式标准.............. window是BOM的顶级对象,但一般可以省略 一.Location对象 相当于浏览器 ...
- BOM之定时器
JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用. 一 s ...
- JS中定时器的返回数值ID值
定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...
- web前端面试第一次[定时器]
BOM中定时器--计时器 定时器参数两个:(函数,时间(单位ms(1000ms=1s))) 时间设置1s,每过1s执行一次函数 //设置定时器 setInterval(funtion(){ alert ...
- 前端3 — js — BOM没完（ 不了解也行 ）
1.js是什么? -- 英文全称javascript javaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚 ...
- Web前端学习路线
第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- 关于web前端的学习路线
第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
随机推荐
- Hibernate学习笔记3.3（Hibernate组建映射2）
多对多 相当于一个老师可以教多个学生,一个学生也可以有多个老师 数据表中都是再设计一个表寸相关的id 1.多对多单向 1annotation Student.java package com.bjsx ...
- Redis Cluster 添加/删除 完整折腾步骤
Redis还是挺好玩的,今天测试了集群的添加.删除节点.重分配slot等.更深入的理解redis的游戏规则.步骤繁多,但是详细. 环境解释: 我是在一台Centos 6.9上测试的,各个redis节点 ...
- 对一个结果集（List）进行手动分页
对一个链表List,进行手动分页,核心代码就是pagin函数: import lombok.extern.slf4j.Slf4j; import org.junit.Before; import or ...
- 2018面向对象程序设计（Java）第7周学习指导及要求
第7周学习指导及要求(2018.10.11-2018.10.14) 学习目标 深入理解OO程序设计的特征:继承.多态: 熟练掌握Java语言中基于类.继承技术构造程序的语法知识: 利用继承定义类设 ...
- HttpClient之EntityUtils对象
最近在学习安卓并用thinkphp做后台,为了抵抗自己的烂记性,就在这里记录一下当我从tp后台获取到json串传到安卓客户端所用到的一个方法函数. EntityUtils对象是org.apache.h ...
- nodejs windows安装
[安装步骤] 一.安装node.js 1.前往node.js官网下载(我下载的是v10.8.0)并安装工具,这里安装路径选到D盘,e:\Program Files\nodejs 安装完毕在命令行输入以 ...
- PHPActiveRecord 学习一
#连接数据库 <?phprequire_once dirname(__FILE__) . '/../../ActiveRecord.php'; // initialize ActiveRecor ...
- Oracle常用查看表结构命令(转)
转自:http://www.cnblogs.com/qingsong-do/archive/2011/11/29/2267244.html 获取表: select table_name from us ...
- C#后台对密码框不能直接赋值
当页面密码框 为 textmode="textpassword"时候,使用 txtpwd.text="XXX",是不会显示的, 应该使用txtpass.Attr ...
- Android模拟器故障：waiting for target deviceto come online
关闭再打开模拟器.删除再新建模拟器均无效. 解决办法:在AVD Manager中,选择立即冷启动(Cold Boot Now)模拟器.