教程:JavaScript核心之Web APIs实用案例
前期更新笔记内容:Web API 基本认知 / 获取DOM元素 / 设置/修改DOM元素内容和元素属性
一、定时器-间歇函数
定时器-间歇函数
目标:能够说出定时器函数在开发中的使用场景
- 网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发
- 例如:网页中的倒计时
- 要实现这种需求,需要定时器函数
- 定时器函数有两种,今天我先总结歇函数
定时器函数可以开启和关闭定时器
1. 开启定时器
- 作用:每隔一段时间调用这个函数
- 间隔时间单位是毫秒
2. 关闭定时器
注意:
- 1. 函数名字不需要加括号
- 2. 定时器返回的是一个id数字
一般不会刚创建就停止,而是满足一定条件再停止
定时器函数小结
1. 定时器函数有什么作用?
可以根据时间自动重复执行某些代码
2. 定时器函数如何开启?
setInterval(函数名, 时间)
3. 定时器函数如何关闭?
![](https://i-blog.csdnimg.cn/blog_migrate/eac346d820d304ed76d78779d73ed032.png)
案例:
![](https://i-blog.csdnimg.cn/blog_migrate/bdab60e8b06c256598eef0dd466fcb26.png)
倒计时效果
需求:按钮60秒之后才可以使用
案例
分析:
①:开始先把按钮禁用(
disabled
属性
)
②:一定要获取元素
③:函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
定时器函数使用
![](https://i-blog.csdnimg.cn/blog_migrate/ab36f191f78eb8c2a9515e4fa9ae2031.png)
案例:网页轮播图效果
需求:每隔一秒钟切换一个图片
分析:
①:获取元素(图片和文字)
②:设置定时器函数
- 设置一个变量++
- 更改图片张数
- 更改文字信息
③:处理图片自动复原从头播放
- 如果图片播放到最后一张就是第9张
- 则把变量重置为0
- 注意逻辑代码写到图片和文字变化的前面
黑马前端专栏干货多多,关注再学,好方便~
2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我。