setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）
来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭
定义和用法：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。
实例：
01，每三秒（3000 毫秒）弹出 "Hello" :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>点击按钮，等待 3 秒会弹出 "Hello"。</p> <p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { setInterval(function(){ alert("Hello"); }, 3000); } </script> </body> </html>
02，可以通过调用一个已命名的函数，每三秒（3000 毫秒）弹出 "Hello":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>点击按钮，等待 3 秒会弹出 "Hello"。</p> <p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p> <button onclick="myFunction()">点我</button> <script> var myVar; function myFunction() { myVar = setInterval(alertFunc, 3000); } function alertFunc() { alert("Hello!"); } </script> </body> </html>
03，显示当前时间( setInterval() 方法会每秒执行一次函数，类似手表功能):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</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>
04，使用 clearInterval() 来停止 setInterval 的执行：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>显示当前时间:</p> <p id="demo"></p> <button onclick="myStopFunction()">停止时间</button> <script> 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); } </script> </body> </html>
05，使用 setInterval() 和 clearInterval()来创建动态进度条：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</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>