JS window对象取消计时器clearInterval() clearInterval() 方法可取消由 setInterval() 设置的交互时间。

最新推荐文章于 2024-10-25 11:20:25 发布

原创最新推荐文章于 2024-10-25 11:20:25 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web前端 #对象

JavaScript进阶篇专栏收录该内容

91 篇文章

订阅专栏

本文介绍如何利用JavaScript的setInterval与clearInterval方法创建和停止动态更新的时间显示。通过实例代码展示了每秒更新页面时间，并在用户点击按钮后停止更新的实现方式。

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒调用clock函数，并将返回值赋值给i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

任务

补充右边编辑器第12行，使用setInterval()计时器，显示动态时间。

补充右边编辑器第18行，点击Stop按钮后，取消计时器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();               	  
      document.getElementById("clock").value = time;
   }
    var i = setInterval("clock()",1000) 
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)" />
  </form>
</body>
</html>