黑马前端-Web APIs 定时器-间歇函数

 教程：JavaScript核心之Web APIs实用案例
前期更新笔记内容：Web API 基本认知 /  获取DOM元素 / 设置/修改DOM元素内容和元素属性

一、定时器-间歇函数

定时器-间歇函数
 

目标：能够说出定时器函数在开发中的使用场景
 

•  网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
•  例如：网页中的倒计时
•  要实现这种需求，需要定时器函数
•  定时器函数有两种，今天我先总结歇函数

定时器函数可以开启和关闭定时器
 

1. 开启定时器
 

•  作用：每隔一段时间调用这个函数
•  间隔时间单位是毫秒

 

2. 关闭定时器
 

注意：

• 1. 函数名字不需要加括号
• 2. 定时器返回的是一个id数字

一般不会刚创建就停止，而是满足一定条件再停止

 

定时器函数小结

1. 定时器函数有什么作用？

可以根据时间自动重复执行某些代码

2. 定时器函数如何开启？

  setInterval(函数名, 时间)

3. 定时器函数如何关闭？
 

 

案例：

 倒计时效果
 

需求：按钮60秒之后才可以使用
 

案例

分析：

①：开始先把按钮禁用（ disabled 属性 ）

②：一定要获取元素

③：函数内处理逻辑

秒数开始减减

按钮里面的文字跟着一起变化

如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击

定时器函数使用

 

案例：网页轮播图效果
 

需求：每隔一秒钟切换一个图片
 

分析：
 

①：获取元素（图片和文字）
 

②：设置定时器函数

• 设置一个变量++
• 更改图片张数
• 更改文字信息

③：处理图片自动复原从头播放

• 如果图片播放到最后一张就是第9张
• 则把变量重置为0
• 注意逻辑代码写到图片和文字变化的前面
   

---

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈  另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。