您的位置：首页 > Web前端 > JavaScript

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

2012-10-19 21:36 639 查看
一、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"
onclick="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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航