# 1、介绍和语法
定时器可以完成定时作用,可以让一段代码延迟一段时间然后再执行。
很多地方都会用到定时器,比如用JS写一个会走的钟表;比如轮播图;
JS定时器有两种:
* 指定一段时间,然后在该时间段之后只执行一次代码,特点是只执行一次。
* 指定一段时间,然后每隔一段时间执行一次代码,也就是间隔一段时间执行一次,一直重复。
具体方法如下:
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
语法:
```
setTimeout(JS代码或函数, 毫秒数);
setInterval (JS代码或函数, 毫秒数);
```
![](https://img.kancloud.cn/72/fa/72fa78767eb9251080a9a52398d8b895_777x556.png)
setInterval() 语法上和setTimeout一样。
# 2、会走的时间
思路是写一个能够输出当前时间的函数,页面加载完毕马上执行一次,然后在用定时器每隔1秒执行一次函数即可。
HTML代码:
![](https://img.kancloud.cn/63/e3/63e3dd769d13183a77edaa24e2f32226_288x25.png)
下面是检测数字是否小于10的函数:
![](https://img.kancloud.cn/c2/0b/c20baa24ae1aa2d9aa03dc56bffa4e88_698x161.png)
下面定义制作时间的函数,然后马上调用一次,这样刷新页面就能够看到时间了:
![](https://img.kancloud.cn/1f/32/1f32fc09bbb1e478cb8607551b2eb541_778x352.png)
使用定时器,让制作时间的函数每隔一秒执行一次:
![](https://img.kancloud.cn/c9/c8/c9c8dfd87b376bc1bc0a2ae84962a6d7_494x27.png)
# 3、终止定时器
对应的终止定时器的方法分别是:
```
clearInterval(定时器计数);
clearTimeout(定时器计数);
```
参数“定时器计数”指的是定时器的返回值。
![](https://img.kancloud.cn/d6/6f/d66fc37d9300ca07011bea9f80bb6e11_667x308.png)
# 4、修改会走的时间
加入两个按钮,一个表示停止,一个表示继续。
HTML加入两个按钮:
![](https://img.kancloud.cn/af/44/af448f5f3879844a160d9cdd1b169ccb_548x80.png)
JS代码给“停止”和“继续”绑定单击事件:
![](https://img.kancloud.cn/36/83/3683707560126099a9b9416196b37649_699x472.png)
优化上述代码:
首先将按钮换成一个:
![](https://img.kancloud.cn/09/de/09ded9e22b26da9bbdf2becd19b96703_574x62.png)
JS代码:
![](https://img.kancloud.cn/55/e2/55e2c50ae3198fec82648337e5000a40_732x420.png)
- 第一天
- 一、学习目标
- 二、关于JavaScript
- 三、JS语法基础
- 四、变量
- 五、常量
- 六、运算符
- 七、数组
- 八、对象
- 九、数据类型
- 第二天
- 一、昨日复习
- 二、今日目标
- 三、数据类型转换
- 四、流程控制
- 五、函数基础
- 六、作用域
- 七、标准库(内置对象)
- 八、总结
- 第三天
- 一、昨日复习
- 二、今日目标
- 三、DOM介绍
- 四、元素(标签)节点查询操作
- 五、元素(标签)节点增删改操作
- 六、设置/获取元素的css样式
- 七、事件和事件对象
- 八、键盘keyCode对照表
- 第四天
- 一、昨日复习
- 二、今日目标
- 三、DOM之属性节点操作
- 四、DOM对象的通用属性
- 五、DOM获取元素的位置
- 六、事件绑定与移除
- 七、事件对象相关属性和方法使用
- 八、案例--可编辑的表格
- 第五天
- 一、今日目标
- 二、执行流程
- 三、定时器
- 四、闭包
- 五、案例
- 第六天
- 一、昨日回顾
- 二、今日目标
- 三、正则表达式概述
- 四、入门案例
- 五、正则语法
- 六、分组/捕获和反向引用
- 七、匹配中文(utf-8编码)
- 八、环视(断言/零宽断言/正向预测/负向预测)
- 九、正则对象的属性和方法
- 十、支持正则表达式的 String 对象的方法
- 十一、案例
- 十二、PHP中的正则表达式
- 第七天
- 一、昨日回顾
- 二、正则案例
- 三、PHP中的正则表达式
- 四、正则练习
- 五、仿淘宝评分小星星
- 六、标签页效果
- 七、横向下拉菜单
- 第八天
- 一、今日目标
- 二、面向对象编程
- 三、定义对象
- 四、对象相关操作
- 五、对象在内存中的存在形式
- 六、原型对象(关键)
- 七、定义对象进阶
- 八、函数进阶
- 第九天
- 一、昨日回顾
- 二、今日目标
- 三、Object
- 四、继承
- 五、this指向总结
- 六、案例(贪吃蛇)
- 第十天
- 一、今日目标
- 二、Ajax概述
- 三、工作原理
- 四、XMLHttpRequest对象介绍
- 五、使用Ajax的步骤
- 六、细节问题
- 七、JSON
- 八、Ajax中,服务器返回json格式的数据
- 九、案例--省市县三级联动
- 第十一天
- 一、昨日回顾
- 二、今日目标
- 三、完成省市县三级联动
- 四、优化省市县三级联动
- 五、服务器返回XML格式的数据
- 六、FormData对象
- 七、跨域请求
- 八、实现跨域请求
- 第十二天
- 一、Ajax回顾
- 二、今日目标
- 三、jQuery概述
- 四、快速入门
- 五、可编辑的表格
- 六、纵向导航菜单
- 七、横向导航菜单
- 八、标签页效果
- 第十三天
- 一、学习目标
- 二、杂项
- 三、jQuery中的事件
- 四、jQuery封装的Ajax
- 五、案例 -- 无刷新的分页
- 第十四天
- 一、昨日回顾
- 二、效果
- 三、跨域请求
- 四、文档操作
- 五、插件编写
- 六、自定义插件
- 七、第三方插件