首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js定时调用指定步骤

2012-09-14 
js定时调用指定方法一、HTML DOM setInterval()、clearInterval() 方法setInterval() 方法可按照指定的周期(

js定时调用指定方法
一、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;       }   }  

热点排行