参考手册
Window 对象
scrollTo()
setTimeout()
返回 Window 对象

Window setInterval() 方法

实例

每隔 3 秒（3000 毫秒）弹出 "Hello" 的警告消息框

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮等待 3 秒钟，然后弹出 "你好" 。</p>
  6. <p>单击关闭消息框后，3 秒钟后将出现一个新的消息框。这将永远持续。。。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   setInterval(function(){ alert("Hello"); }, 3000);
  12. }
  13. </script>
  15. </body>
  16. </html>
运行一下

定义与用法

setInterval() 方法以指定的间隔（毫秒）调用函数或计算表达式。

setInterval() 方法将继续调用该函数，直到 clearInterval() 被调用，或窗口被关闭。

setInterval() 返回的 ID 值用作 clearInterval() 方法的参数。

提示: 1000 ms = 1 second.

提示: 要在指定的毫秒数后仅执行一次函数，请使用 setTimeout() 方法。

浏览器支持

表中的数字指定完全支持该方法的第一个浏览器版本。

方法
setInterval()1.04.01.01.04.0

语法

  1. setInterval(function, milliseconds, param1, param2, ...)

参数值

参数描述
function必填。将要执行的函数
milliseconds必填。 执行代码的频率间隔（毫秒）。如果值小于 10，则使用 10
param1, param2, …可选。function 函数的附加参数 (IE9 及更早版本不支持)

技术细节

返回值:一个数字，表示设置的计时器的ID值。将此值与 clearInterval() 方法一起使用可取消计时器

更多实例

实例

您还可以引用 "named" 函数；每 3 秒（3000 毫秒）弹出 "Hello":

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>点击按钮等待 3 秒弹出 &quot;Hello&quot;</p>
  6. <p>单击关闭消息框后，3 秒钟后将出现一个新的消息框。这将永远持续。。。</p>
  8. <button onclick="myFunction()">试一试</button>
  10. <script>
  11. var myVar;
  13. function myFunction() {
  14.   myVar = setInterval(alertFunc, 3000);
  15. }
  17. function alertFunc() {
  18.   alert("Hello!");
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下
实例

显示当前时间（setInterval() 方法将每1秒执行一次函数，就像数字手表一样）:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>此页上的脚本启动此时钟:</p>
  6. <p id="demo">
  8. <script>
  9. var myVar = setInterval(myTimer, 1000);
  11. function myTimer() {
  12.   var d = new Date();
  13.   var t = d.toLocaleTimeString();
  14.   document.getElementById("demo").innerHTML = t;
  15. }
  16. </script>
  18. </body>
  19. </html>
运行一下
实例

在上一个示例中使用 clearInterval() 停止时间:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>此页上的脚本启动此时钟:</p>
  6. <p id="demo">
  8. <button onclick="myStopFunction()">停止</button>
  10. <script>
  11. var myVar = setInterval(myTimer, 1000);
  13. function myTimer() {
  14.   var d = new Date();
  15.   var t = d.toLocaleTimeString();
  16.   document.getElementById("demo").innerHTML = t;
  17. }
  19. function myStopFunction() {
  20.   clearInterval(myVar);
  21. }
  22. </script>
  24. </body>
  25. </html>
运行一下
实例

使用 setInterval() 和 clearInterval() 创建动态进度条:

  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. #myProgress {
  5.   width: 100%;
  6.   height: 30px;
  7.   position: relative;
  8.   background-color: #ddd;
  9. }
  11. #myBar {
  12.   background-color: #4CAF50;
  13.   width: 10px;
  14.   height: 30px;
  15.   position: absolute;
  16. }
  17. </style>
  18. <body>
  20. <div id="myProgress">
  21.   <div id="myBar"></div>
  22. </div>
  24. <br>
  25. <button onclick="move()">点击这里</button>
  27. <script>
  28. function move() {
  29.   var elem = document.getElementById("myBar");
  30.   var width = 0;
  31.   var id = setInterval(frame, 10);
  32.   function frame() {
  33.     if (width == 100) {
  34.       clearInterval(id);
  35.     } else {
  36.       width++;
  37.       elem.style.width = width + '%';
  38.     }
  39.   }
  40. }
  41. </script>
  43. </body>
  44. </html>
运行一下
实例

每 300 毫秒在两种背景色之间切换一次:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>在本例中，setInterval() 方法每 300 毫秒执行一次 setColor() 函数，该函数将在两种背景色之间切换。</p>
  7. <button onclick="stopColor()">停止切换</button>
  9. <script>
  10. var myVar = setInterval(setColor, 300);
  12. function setColor() {
  13.   var x = document.body;
  14.   x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
  15. }
  17. function stopColor() {
  18.   clearInterval(myVar);
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下
实例

将参数传递给 alertFunc 函数（在 IE9 及更早版本中不起作用）:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击开始按钮，每 2 秒弹出一次 "Hello" 。</p>
  7. <p>在本例中，我们还输出了传递给 alertFunc() 函数的参数（在 IE9 和更早版本中不起作用）。</p>
  9. <button onclick="myStartFunction()">开始</button> <button onclick="myStopFunction()">停止</button>
  11. <p id="demo">
  13. <p id="demo2" style="color:red;">
  15. <script>
  16. var myVar;
  18. function myStartFunction() {
  19.   myVar = setInterval(alertFunc, 2000, "First parameter", "Second parameter");
  20. }
  22. function alertFunc(param1, param2) {
  23.   document.getElementById("demo").innerHTML += "Hello ";
  25.   document.getElementById("demo2").innerHTML = "参数传递到 alertFunc(): <br>" 
  26.   + param1 + "<br>" + param2 + "<br>";
  27. }
  29. function myStopFunction() {
  30.   clearInterval(myVar);
  31. }
  32. </script>
  34. </body>
  35. </html>
运行一下

但是，如果使用一个匿名函数，它将在所有浏览器中工作:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击开始按钮，每 2 秒弹出一次 "Hello" 。</p>
  7. <p>在本例中，我们还输出了传递给 alertFunc() 函数的参数（在 IE9 和更早版本中不起作用）。</p>
  9. <button onclick="myStartFunction()">开始</button> <button onclick="myStopFunction()">停止</button>
  11. <p id="demo">
  13. <p id="demo2" style="color:red;">
  15. <script>
  16. var myVar;
  18. function myStartFunction() {
  19.   myVar = setInterval(function(){ alertFunc("First parameter", "Second parameter"); }, 2000);
  20. }
  22. function alertFunc(param1, param2) {
  23.   document.getElementById("demo").innerHTML += "Hello ";
  25.   document.getElementById("demo2").innerHTML = "参数传递到 alertFunc(): <br>" 
  26.   + param1 + "<br>" + param2 + "<br>";
  27. }
  29. function myStopFunction() {
  30.   clearInterval(myVar);
  31. }
  32. </script>
  34. </body>
  35. </html>
运行一下

相关页面

Window 对象: clearInterval() 方法

Window 对象: setTimeout() 方法

Window 对象: clearTimeout() 方法

scrollTo()
setTimeout()

分类导航