一、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中显示的内容
③ 按钮用来停止方法的调用
<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"
οnclick="window.clearInterval(intervalId)"
value="停止计时" />
</body>
</html>
2、JS文件(clock.js)内容如下:
/*
* 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;
}
}
转载地址:http://blog.csdn.net/feng_cs/article/details/4300454