setTimeout()方法和setInterval()方法
setTimeout方法：
定义和用法：
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
tip: 1000 毫秒= 1 秒。
tip: 如果你只想重复执行可以使用setInterval()方法。
tip: 使用 clearTimeout() 方法来阻止函数的执行。
语法：setTimeout(code, milliseconds, param1, param2, ...)
返回值：返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。
实例：
//eg1：三秒后弹出“HELLO” <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击按钮，3 秒后会弹出 "Hello"。</p> <button onclick="myFunction()">点我</button> <script> var myVar; function myFunction() { myVar = setTimeout(alertFunc, 3000); } function alertFunc() { alert("Hello!"); } </script> </body> </html> //eg2：第2、4、6秒修改输入框中的文本： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击按钮，在第 2、4、6 秒修改输入框中的文本：</p> <button onclick="timedText()">显示时间文本</button> <input type="text" id="txt"> <script> function timedText() { var x = document.getElementById("txt"); setTimeout(function(){ x.value="2 秒" }, 2000); setTimeout(function(){ x.value="4 秒" }, 4000); setTimeout(function(){ x.value="6 秒" }, 6000); } </script> </body> </html> //eg3：打开一个新窗口，3 秒后将该窗口关闭 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>打开一个新窗口，3 秒后将该窗口关闭:</p> <button onclick="openWin()">打开 "窗口"</button> <script> function openWin() { var myWindow = window.open("", "", "width=200, height=100"); myWindow.document.write("<p>这是一个新窗口'</p>"); setTimeout(function(){ myWindow.close() }, 3000); } </script> </body> </html> //eg4计数器 -- 可以通过点击按钮停止： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击按钮，等待 3 秒后弹出 "Hello" 。</p> <p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 3 秒前点击)</p> <button onclick="myFunction()">先点我</button> <button onclick="myStopFunction()">阻止弹出</button> <script> var myVar; function myFunction() { myVar = setTimeout(function(){ alert("Hello") }, 3000); } function myStopFunction() { clearTimeout(myVar); } </script> </body> </html> //显示当前时间 <!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> //eg5传递参数给 alertFunc 函数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击按钮 2 秒后输出 "Hello"。</p> <p>实例中，我们也会输出传递给 alertFunc() 函数的参数 ( 兼容所有浏览器 )。</p> <button onclick="myStartFunction()">开始</button> <p id="demo"></p> <p id="demo2" style="color:red;"></p> <script> var myVar; function myStartFunction() { myVar = setTimeout(function(){ alertFunc("Runoob", "Google"); }, 2000); } function alertFunc(param1, param2) { document.getElementById("demo").innerHTML += "Hello "; document.getElementById("demo2").innerHTML = "传递给 alertFunc() 的参数: <br>" + param1 + "<br>" + param2 + "<br>"; } </script> </body> </html>
setInterval()方法
定义和用法：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：setInterval(code, milliseconds);
实例：
//显示当前时间( setInterval() 方法会每秒执行一次函数，类似手表功能):
<!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.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } </script> </body> </html>
//使用 setInterval() 和 clearInterval()来创建动态进度条： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> #myProgress { width: 100%; height: 30px; position: relative; background-color: #ddd; } #myBar { background-color: #4CAF50; width: 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> //每 300 毫秒切换背景颜色： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>以下实例中，setInterval() 方法每 300 毫秒执行 setColor() 函数 ，该函数可以切换背景颜色。</p> <button onclick="stopColor()">停止切换</button> <script> var myVar = setInterval(function(){ setColor() }, 300); function setColor() { var x = document.body; x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow"; } function stopColor() { clearInterval(myVar); } </script> </body> </html>
