js定时调用指定方法
编程技术 / houtizong 发布于 3年前 176
- 一、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];
文章归档
文章标签
友情链接
