一、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。本人一般用户倒计时或定时结束某件事情
1,调方法，第一参数是方法名，第二参数是毫秒数，表示三秒后执行alertFunc方法，只执行一次。
var myVar; function myFunction() { myVar = setTimeout(alertFunc, 3000); } function alertFunc() { alert("Hello!"); }
2，第一个参数直接写要执行的代码，第二个参数是毫秒数，过毫秒数执行一次。例：打开一个新窗口，3 秒后将该窗口关闭
var myWindow = window.open("", "", "width=200, height=100"); myWindow.document.write("<p>这是一个新窗口'</p>"); setTimeout(function(){ myWindow.close() }, 3000)
3，实现计时器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>把兰舟弃了</title> </head> <body> <button onclick="startCount()">开始计数!</button> <input type="text" id="txt"> <button onclick="stopCount()">停止计数!</button> <p> 点击 "开始计数!" 按钮开始执行计数程序。输入框从 0 开始计算。 点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会重新开始计数。 </p> <script> var c = 0; var t; var timer_is_on = 0; function timedCount() { document.getElementById("txt").value = c; c = c + 1; t = setTimeout(function(){ timedCount() }, 1000); } function startCount() { if (!timer_is_on) { timer_is_on = 1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on = 0; } </script> </body> </html>
4，显示时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>把兰舟弃了</title> </head> <body onload="startTime()"> <div id="txt"></div> <script> function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); // 在 numbers<10 的数字前加上 0 m = checkTime(m); s = checkTime(s); document.getElementById("txt").innerHTML = h + ":" + m + ":" + s; var t = setTimeout(function(){ startTime() }, 500); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } </script> </body> </html>
二、setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
1、每三秒执行一次
setInterval(function(){ alert("Hello"); }, 3000);
2、使用一个代码字符串
setInterval('alert("Hello");', 3000);
3、显示当前时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>把兰舟弃了</title> </head> <body> <p>显示当前时间:</p> <p id="demo"></p> <script> var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.getTime(); document.getElementById("demo").innerHTML = t; } </script> </body> </html>
4、使用 clearInterval() 来停止 setInterval 的执行
var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function myStopFunction() { clearInterval(myVar); }
5、进度条
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>把兰舟弃了</title> </head> <style> #myProgress { 100%; height: 30px; position: relative; background-color: #ddd; } #myBar { background-color: #4CAF50; 10px; height: 30px; position: absolute; } </style> <body> <h1>JavaScript 进度条</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">点我</button> <script> function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } </script> </body> </html>