js定时调用指定方法

编程技术  /  houtizong 发布于 3年前   224
一、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;       }   }  

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

留言需要登陆哦

技术博客集 - 网站简介:
前后端技术:
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成

网站主要作用:
1.编程技术分享及讨论交流,内置聊天系统;
2.测试交流框架问题,比如:Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识,如有侵权请发邮件到站长邮箱,站长会尽快处理;
4.站长邮箱:[email protected];

      订阅博客周刊 去订阅

文章归档

文章标签

友情链接

Auther ·HouTiZong
侯体宗的博客
© 2020 zongscan.com
版权所有ICP证 : 粤ICP备20027696号
PHP交流群 也可以扫右边的二维码
侯体宗的博客