15、计时器方法1（setInterval、clearInterval）
2024-05-02 13:40:07
计时器方法（setInterval、setTimeout）
| 计时器方法 | |
|---|---|
| 设置计时器（每n秒输出） |
setInterval
|
| 取消计时器 |
clearInterval
|
| 设置计时器（n秒后输出） |
setTimeout
|
| 取消计时器 |
clearTimeout
|
2、创建计时器（setInterval）
// 1、setInterval：计时器var timer = setInterval(() => {console.log('Hello world!');}, 2000)
3、取消计时器（clearInterval）
// 2、clearInterval：暂停计时器var btn = document.querySelector('.case1 button');btn.onclick = function () {clearInterval(timer);}
4、计时器显示时针(setInterval)
// 3、计时器显示时针：setIntervalvar h1 = document.querySelector('.case2 h1');setInterval(() => {let time = new Date();let hours = time.getHours();let minutes = time.getMinutes();let seconds = time.getSeconds();let timeNow = `${hours}:${minutes}:${seconds}`;h1.innerHTML = timeNow;}, 1000);
5、计时器显示时间（开始、暂停、结束）
// 4、时间（开始、暂停、结束）var timer1 = document.querySelector('.case3 h1');var start = document.querySelector('.case3 .start');var pause = document.querySelector('.case3 .pause');var stop = document.querySelector('.case3 .end');var seconds = 0;var ms = 0;// 显示时间timer1.innerHTML = `${seconds}:${ms}`;// 计时器var timer2 = null;// 4.1、开始计时器start.onclick = function () {// 先清空计时器clearInterval(timer2);// 设置计时器timer2 = setInterval(() => {if (ms === 9) {++seconds;ms = 0;}++ms;timer1.innerHTML = `${seconds}:${ms}`;}, 100)}// 4.2、暂停计时器pause.onclick = function () {clearInterval(timer2);}// 4.3、结束计时器stop.onclick = function () {seconds = 0;ms = 0;timer1.innerHTML = `${seconds}:${ms}`;}
7、源代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 1-2、计时器 --><div class="case1"><button>暂停计时器</button></div><!-- 3、时针 --><div class="case2"><h1>时针</h1></div><!-- 4、时间（开始、暂停、结束） --><div class="case3"><h1>时针</h1><button class="start">开始</button><button class="pause">暂停</button><button class="end">结束</button></div><script>// 1、setInterval：计时器var timer = setInterval(() => {console.log('Hello world!');}, 2000)// 2、clearInterval：暂停计时器var btn = document.querySelector('.case1 button');btn.onclick = function () {clearInterval(timer);}// 3、计时器显示时针：setIntervalvar h1 = document.querySelector('.case2 h1');setInterval(() => {let time = new Date();let hours = time.getHours();let minutes = time.getMinutes();let seconds = time.getSeconds();let timeNow = `${hours}:${minutes}:${seconds}`;h1.innerHTML = timeNow;}, 1000);// 4、时间（开始、暂停、结束）var timer1 = document.querySelector('.case3 h1');var start = document.querySelector('.case3 .start');var pause = document.querySelector('.case3 .pause');var stop = document.querySelector('.case3 .end');var seconds = 0;var ms = 0;// 显示时间timer1.innerHTML = `${seconds}:${ms}`;// 计时器var timer2 = null;// 4.1、开始计时器start.onclick = function () {// 先清空计时器clearInterval(timer2);// 设置计时器timer2 = setInterval(() => {if (ms === 9) {++seconds;ms = 0;}++ms;timer1.innerHTML = `${seconds}:${ms}`;}, 100)}// 4.2、暂停计时器pause.onclick = function () {clearInterval(timer2);}// 4.3、结束计时器stop.onclick = function () {seconds = 0;ms = 0;timer1.innerHTML = `${seconds}:${ms}`;}// 5、节流：每隔1秒执行一次(setInterval)var timer = null;window.onscroll = function () {// 先清空计时器，防止计时器叠加clearInterval(timer);timer = setInterval(() => {console.log('节流');}, 1000);}</script>
</body></html>
15、计时器方法1（setInterval、clearInterval）相关推荐
- js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...
- nodejs中的全局函数setTimeout/clearTimeout,setInterval/clearInterval,unref/ref
/** global的函数和方法*1.setTimeout.clearTimeout 多长时间后执行函数(只执行一次)*2.setInterval.clearInterval 每隔多少秒执行一次的计时 ...
- php实现setInterval方法,js setInterval和setTimeout用法分析
本文主要分享一下javascript中的两个定时执行函数setInterval和setTimeout的用法. setInterval() 定义和用法 setInterval() 方法可按照指定的周期( ...
- 《让系统发生重大宕机事故的15个方法》
来源| 技术领导力(ID:jishulingdaoli) 你没看错,本文探讨的主题是"让系统发生重大宕机事故的15个方法",仔细研究后你会发现,把系统搞宕机是一件非常有技术含量的事 ...
- 安防工程商前期收集客户信息15种方法与详细流程
安防工程商前期收集客户信息15种方法与详细流程 [关键词]安防资料安防 收集 客户 工程 监控 作为工程商,安防工程商与其他行业工程商一样,要面临前期客户开发的问题.收集客户信息管理及流程如下 ...
- Python 集合15 difference()方法:返回集合的差集
15 difference()方法:返回集合的差集 文章目录 15 difference()方法:返回集合的差集 1.语法要点 2.实操练习 2.1参数为集合 2.2参数为列表 2.3 参数为元组 2 ...
- 如何有效提升英文口语水平？这 15 个方法值得学习！
要提升英文口语水平,除了多说多练,还有很多方法可以尝试.下面,小编为大家整理了15个有效的方法,让你说英语更自信流利! Record yourself speaking English and lis ...
- 2011考研英语单词记忆的15个方法总结
2010年考研已经在紧张的氛围中结束了,回顾以往的教学经历和对学员复习计划时间的安排,我个人认为,这个时候也是下一届计划考研的学员着手备考的最佳时期,为什么说这段时间是最佳的备考时间呢?根据中国考试研 ...
- 领导让员工快速离职的15个“方法”！
蓝色关注,回复"1"获取知名公司程序员和产品经理职级 第「134」篇原创.产品经理程序员,职场问题找军哥. 见字如面,我是军哥. 对,你没看错,就是让员工快速离职的15个" ...
最新文章
- 我对javascript对象的理解
- JS调用打印机打印Web页面
- 如何免费注册Coursera课程
- 子网划分，主机号，网络号计算
- python四舍五入round_四舍五入就用round( )？Python四舍五入的正确打开方式！-Go语言中文社区...
- lwip连续发数据卡死_LwIP用TCP连接方式在数据量比较大协议栈卡死
- CCS 6.0 下载
- springboot ---微信ocr身份证识别
- sql获取服务器系统时间,SQL Server取系统当前时间
- 零基础怎么自学日语？
- PPT用宏插入不同背景图片
- SRS之SrsConfig类
- Cesium 修改默认地球贴图的两种方式
- Gitlab-CI Runner缓存
- 【030】纪妖–正版妖怪百科资料库
- 航迹推演通过左右轮速度得到机器人前进线速度和角速度
- 如何在大屏幕上滚动播放视频、图片和文字
- SpringBoot集成Hasor-Dataway数据查询接口
- 何勉：第一性原理和精益敏捷的规模化实施
- 计算机毕业设计springboot洗衣店订单管理系统