JS setInterval() 与 clearInterval() 方法的使用

最新推荐文章于 2023-05-01 19:50:23 发布

rugaxm

最新推荐文章于 2023-05-01 19:50:23 发布

阅读量3.7k

点赞数 1

分类专栏： javascript jsp

本文链接：https://blog.csdn.net/rugaxm/article/details/8571746

版权

jsp 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

javascript

37 篇文章 0 订阅

订阅专栏

一、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中显示的内容

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

[xhtml]view plaincopy 
    
 <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）内容如下：

[javascript]view plaincopy 
    
 /* 
  * 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;  
     }  
 }  