1-setInterval
定时器：某一段代码并不是马上执行，而是隔一段时间执行
setInterval:创建定时器
特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码
clearInterval(定时器id)：清除定时器
一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器
<script> /*1.定时器: 让一段代码每隔一定时间自动执行 2.语法 开启定时器： setInterval() 一旦开启永久重复，只能手动调用语法停止 清除定时器 clearInterval() */ let p1 = document.querySelector('#p1'); let timeID = null;//声明变量存储定时器 //注册事件 document.getElementById('start').onclick = function () { /**开启定时器 第一个参数：一段代码 回调函数 第二个参数：时间间隔 单位：ms 返回值： 定时器ID timeID 定时器ID：一个页面可以开启很多个不同的定时器，浏览器为了区分这些定时器，每开启一个定时器 就会给它们一个编号，这个编号叫做定时器ID */ timeID = setInterval(function () { console.log('嘿嘿嘿'); p1.innerText++; // let text = p1.innerText; // text++; // 只是变量text的值+1 // console.log(text); // p1.innerText = text; }, 1000); }; document.getElementById('end').onclick = function () { //清除定时器 //参数：定时器ID clearInterval(timeID); }; </script>
2-setTimeout
定时器setTimeout与setInterval唯一的区别是，setTimeout定时器只会执行一次
总结：
1.如果你想让这个代码一段时间后只执行一次，使用setTimeout
2.如果你想让这个代码每隔一段时间执行一次（执行多次），使用setInterval
<script> /* 1. setInterval() :永久定时器 一旦开启会永久重复， 只能手动清除 clearInterval() :清除 2. setTimeout() : 一次定时器 一旦开启只会执行一次，执行完毕之后自动清除 */ let timeID = setTimeout(function(){ console.log('boom'); },5000); //一次定时器也可以清除 // clearInterval(timeID); // clearTimeout(timeID); </script>
倒计时秒杀小案例
效果图
基本结构样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 100px; margin: 100px auto; } span { display: inline-block; width: 30px; height: 40px; line-height: 40px; background-color: #222; color: #fff; text-align: center; font-weight: 700; } </style> </head> <body> <div class="box"> <span id="spanHour">01</span> <span>:</span> <span id="spanMin">01</span> <span>:</span> <span id="spanSec">15</span> </div> </body> </html>
思路分析
思路分析
1. 获取元素：#spanHour,#spanMin,#spanSec
2. 每隔1000ms，代码执行：定时器 let timeId = setInterval()
2.1 获取时分秒的具体数据：字符串，转成数字：parseInt()
2.2 秒数-1
2.3 判定：秒数如果小于 0
2.3.1 重置描述为59
2.3.2 分-1
2.4 判定：分数如果小于 0
2.4.1 分数重置为 59
2.4.2 时-1
2.5 数据加工：补充前导0（不改变大小，保持2位宽度）
2.6 数据写回页面给用户看
2.7 判定：所有数据是否都为0：为0 结束：开始秒杀
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 100px; margin: 100px auto; } span { display: inline-block; width: 30px; height: 40px; line-height: 40px; background-color: #222; color: #fff; text-align: center; font-weight: 700; } </style> </head> <body> <div class="box"> <span id="spanHour">01</span> <span>:</span> <span id="spanMin">01</span> <span>:</span> <span id="spanSec">15</span> </div> <script> // 需求：倒计时秒杀：时间到 0 ：0 ：0 执行秒杀效果 /* 思路分析 1. 获取元素：#spanHour,#spanMin,#spanSec 2. 每隔1000ms，代码执行：定时器 let timeId = setInterval() 2.1 获取时分秒的具体数据：字符串，转成数字：parseInt() 2.2 秒数-1 2.3 判定：秒数如果小于 0 2.3.1 重置描述为59 2.3.2 分-1 2.4 判定：分数如果小于 0 2.4.1 分数重置为 59 2.4.2 时-1 2.5 数据加工：补充前导0（不改变大小，保持2位宽度） 2.6 数据写回页面给用户看 2.7 判定：所有数据是否都为0：为0 结束：开始秒杀 */ // 1. 获取元素：#spanHour,#spanMin,#spanSec let hour = document.getElementById('spanHour'); let min = document.getElementById('spanMin'); let sec = document.getElementById('spanSec'); // console.log(hour, min, sec); // 2. 每隔1000ms，代码执行：定时器 let timeId = setInterval() let z = setInterval(function () { // 2.1 获取时分秒的具体数据：字符串，转成数字：parseInt() let h = parseInt(hour.innerText); let m = parseInt(min.innerText); let s = parseInt(sec.innerText); // console.log(h, m, s); // 2.2 秒数-1 s--; // 2.3 判定：秒数如果小于 0 if (s < 0) { // 2.3.1 重置描述为59 s = 59; // 2.3.2 分-1 m--; }; // 2.4 判定：分数如果小于 0 if (m < 0) { // 2.4.1 分数重置为 59 m = 59; // 2.4.2 时-1 h--; }; // 2.5 数据加工：补充前导0（不改变大小，保持2位宽度） if (s < 10) { s = '0' + s; }; if (m < 10) { m = '0' + m; }; if (h < 10) { h = '0' + h; }; // 2.6 数据写回页面给用户看 hour.innerText = h; min.innerText = m; sec.innerText = s; // 2.7 判定：所有数据是否都为0：为0 结束：开始秒杀 if (s == 0 && m == 0 && h == 0) { clearInterval(z); alert('秒杀开始'); }; }, 1000); </script> </body> </html>
