使用注意：为了防止定时器累加，使用定时器要先清除后设置；要保证内存中只有一个定时器。
1、循环执行：一段程序能够每间隔一段时间执行一次
设置定时器：【var timeid = window.setInterval（“方法名或方法”，“延时”）;】
清除定时器【window.clearInterval(timeid);】
// window.setInterval("console.log('1秒打印一次')", 1000); // setInterval(function() { // console.log('1秒打印一次'); // }, 1000); function test() { console.log('1秒打印一次'); } setInterval(test, 2000);
示例1：秒表计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器计时</title> <style> #box { width: 300px; height: 200px; border: 1px solid #ccc; margin: 20px auto; text-align: center; } .btn { width: 100%; margin: 10px; } .diaplayTime { font-weight: 600; font-size: 20px; margin-top: 30px; } </style> </head> <body> <div> <div> <button>开启</button> <button>结束</button> <button>清零</button> </div> <div> <span>计时时间为：</span> <span>0</span> 秒 </div> </div> <script> window.onload = function() { // 1.获取需要的标签 var btn1 = $("btn1"); var btn2 = $("btn2"); var btn3 = $("btn3") var totalTime = $("totalTime"); var second = 0, timer = null; // 2. 开启定时器 btn1.onclick = function() { // 定时器先清除后设置：防止定时器累加 clearInterval(timer); // 2.1 设置定时器 timer = setInterval(function() { second += 1; console.log(second) totalTime.innerHTML = second; }, 1000); } // 3. 结束定时器 btn2.onclick = function() { clearInterval(timer); } // 4.时间清零 btn3.onclick = function() { clearInterval(timer); second = 0; totalTime.innerHTML = second; } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } </script> </body> </html>
示例2：节假日倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器-放假倒计时</title> <style> #time { font-size: 30px; color: blue; text-align: center; } </style> </head> <body> <div></div> <script> window.onload = function() { // 1.获取需要的标签 var time = document.getElementById('time'); // 2. 自定义将来的时间 var nextDate = new Date('2019/10/18 17:30:00'); // 3. 开启定时器 setInterval(function() { // 4. 获取现在的时间 var currentDate = new Date(); // 5. 获取时间戳 var currentTime = currentDate.getTime(); var nextTime = nextDate.getTime(); // 6. 剩下的时间戳 var allTime = nextTime - currentTime; // 7. 把毫秒转成秒 var allSecond = parseInt(allTime / 1000); // 8.转化 var d = size(parseInt(allSecond / 3600 / 24)); var h = size(parseInt(allSecond / 3600 % 24)); var m = size(parseInt(allSecond / 60 % 60)); var s = size(parseInt(allSecond % 60)); // 9. 注入 time.innerText = "距离放假还有" + d + "天" + h + "小时" + m + "分钟" + s + "秒"; }, 1000); // 时间显示处理 function size(num) { return num >= 10 ? num : '0' + num; } } </script> </body> </html>
注意：把总的秒数（allSecond）转化为 天(d)+时(h)+分(m)+秒(s)的形式，公式如下
d=parseInt(allSecond / 3600 / 24)
h=parseInt(allSecond / 3600 %24)
m=parseInt(allSecond / 60 %60)
s=parseInt(allSecond%60)
示例3：时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } #box { width: 600px; height: 600px; background: url("images/clock.jpg") no-repeat; margin: 10px auto; position: relative; } #hour, #min, #second { position: absolute; left: 50%; top: 0; width: 30px; height: 600px; margin-left: -15px; } #hour { background: url("images/hour.png") no-repeat center center; } #min { background: url("images/minute.png") no-repeat center center; } #second { background: url("images/second.png") no-repeat center center; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> <script> window.onload = function() { // 1. 获取需要的标签 var hour = document.getElementById("hour"); var min = document.getElementById("min"); var second = document.getElementById("second"); // 2.开启定时器 setInterval(function() { // 2.1 获取当前的时间戳 var date = new Date(); // 2.2 求出总毫秒数 var millS = date.getMilliseconds(); var s = date.getSeconds() + millS / 1000; var m = date.getMinutes() + s / 60; var h = date.getHours() % 12 + m / 60; // 2.3 旋转 hour.style.transform = 'rotate(' + h * 30 + 'deg)'; min.style.transform = 'rotate(' + m * 6 + 'deg)'; second.style.transform = 'rotate(' + s * 6 + 'deg)'; }, 10); } </script> </body> </html>
注意：1小时时针旋转30度，1分钟分钟旋转6度，1秒钟秒钟旋转6度。
hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';
2、定时执行：某一段程序需要在延迟多少时间后执行
设置定时器：【var timeid = window.setTimeout(“方法名或方法”, “延时”);】
清除定时器：【window.clearTimeout(timeid);】
示例