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 ...
随机推荐
- MVC缺点总结
MVC的缺点: 1.完全理解MVC比较复杂. 由于MVC模式提出的时间不长,加上同学们的实践经验不足,所以完全理解并掌握MVC不是一个很容易的过程. 2.调试困难. 因为模型和视图要严格的分离,这样也 ...
- JS代码注释
1.css和js都可以使用/**/进行注释 2.html使用<!---->注释 3.单行js代码可以使用//进行注释 <!DOCTYPE html> <html lang ...
- UILabel的一些属性
1.0 lineBreakMode 1.1.0 NSLineBreakByWordWrapping = 0, 以字符为显示单位显示,后面部分省略不显示 NSLineBreakByCharWrapp ...
- ADO.Net 数据库增加
数据库增加数据其实就是把查询语句换成了增加语句,后面执行语句用操作变量点出一个执行方法 cmm.ExecuteNonQuery();//关键语句,执行CommandText,的SQL语句,增删改都用这 ...
- spring 手册
https://www.tutorialspoint.com/spring/spring_architecture.htm
- js判断是否为undefined
typeof(isadmin)=="undefined"需要使用typeof才能判断
- 2018面向对象程序设计（Java）第15周学习指导及要求
2018面向对象程序设计(Java)第15周学习指导及要求 (2018.12.6-2018.12.9) 学习目标 (1) 掌握Java应用程序打包操作: (2) 了解应用程序存储配置信息的两种方法 ...
- nbtscan工具
这是一款用于扫描Windows网络上NetBIOS名字信息的程序.该程序对给出范围内的每一个地址发送NetBIOS状态查询,并且以易读的表格列出接收到的信息,对于每个响应的主机,NBTScan列出它的 ...
- excel 数据量较大边查询边输入到excel表格中
public Resultmodel getexpenseMessagx(HttpServletResponse response, String date1, String date2) { lon ...
- linux上单网卡配置使用多个IP地址
准备一台红帽系列的linux(例如rhel.red hat.centos.fredora等) 方法/步骤 新建配置文件. 首先说明一下规则: 新建配置文件,配置文件名称为ifcfg-适配器名称:0-2 ...