js定时调用指定方法

最新推荐文章于 2025-05-12 19:10:09 发布

原创最新推荐文章于 2025-05-12 19:10:09 发布 · 379 阅读

CC 4.0 BY-SA版权

文章标签：

一、HTML DOM setInterval()、clearInterval() 方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval() 方法可以取消该周期性的方法调用。

详细可参见：http://www.w3school.com.cn/htmldom/met_win_setinterval.asp

当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行

访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了.

二、如何使用

下面的代码体现了以上两个方法的使用方式

1、html页面内容如下：

①　页面上用div实时显示当前时间

　　　②　调用JS控制div中显示的内容

　　　③　按钮用来停止方法的调用

view plaincopy to clipboardprint?

<html>  
<head>  
  <title>标题</title>  
  <script src="../js/clock.js" mce_src="js/clock.js"  
          language="JavaScript">  
  </script>  
</head>  
<body>  

  <div id="clock"></div>  

  <script language="JavaScript">  
  <!--   
    var clockDiv = document.getElementById("clock");   

    // 自定义时钟对象，实时显示当前时间   
    var clickObj = new Clock(clockDiv);   

    /*   
     * setInterval()方法使用，周期性的调用clickObj.getCurrentDate()   
     * 以更新显示内容   
      */   
    var intervalId = window.setInterval("clickObj.getCurrentDate()", 1000);   

  // -->  
  </script>  

  <br>  

  <!--    
     此处clearInterval()方法的参数intervalId就是上面setInterval()调用后的   
     返回值    
  -->  
  <input type="button"    
         onclick="window.clearInterval(intervalId)"    
         value="停止计时" />  

</body>  
</html>

 <html>
<head>
  <title>标题</title>
  <script src="../js/clock.js" mce_src="js/clock.js"
          language="JavaScript">
  </script>
</head>
<body>

  <div id="clock"></div>

  <script language="JavaScript">
  <!--
    var clockDiv = document.getElementById("clock");

    // 自定义时钟对象，实时显示当前时间
    var clickObj = new Clock(clockDiv);

    /*
     * setInterval()方法使用，周期性的调用clickObj.getCurrentDate()
     * 以更新显示内容
      */
    var intervalId = window.setInterval("clickObj.getCurrentDate()", 1000);

  // -->
  </script>

  <br>

  <!-- 
     此处clearInterval()方法的参数intervalId就是上面setInterval()调用后的
     返回值 
  -->
  <input type="button" 
         onclick="window.clearInterval(intervalId)" 
         value="停止计时" />

</body>
</html>

2、JS文件（clock.js）内容如下：

view plaincopy to clipboardprint?

/*  
 * param clockDiv  
 *      传入的div对象  
 */  
function Clock(clockDiv) {   

    this.clockDiv = clockDiv;   

    this.getCurrentDate = function() {   

        // 获取当前日期   
        var currDate = new Date();   

        // 分别获取 年、月、日、时、分、秒   
        var currDateTime = currDate.getYear();   
        currDateTime += "-";   
        currDateTime += (currDate.getMonth() + 1);   
        currDateTime += "-";   
        currDateTime += currDate.getDate();   
        currDateTime += " ";   
        currDateTime += currDate.getHours();   
        currDateTime += ":";   
        currDateTime += currDate.getMinutes();   
        currDateTime += ":";   
        currDateTime += currDate.getSeconds();   

        // 将当前时间赋值到div对象中   
        this.clockDiv.innerHTML = currDateTime;   
    }   
}