参照W3C标准:
setInterval() 方法
使用对象为 HTML DOM Window 对象
定义和用法
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数 | 描述 |
---|---|
code | 必需。要调用的函数或要执行的代码串。 |
millisec | 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。 |
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
实例
1 <html>View Code
2 <body>
3
4 <input type="text" id="clock" size="35" />
5 <script language=javascript>
6 var int=self.setInterval("clock()",50)
7 function clock()
8 {
9 var t=new Date()
10 document.getElementById("clock").value=t
11 }
12 </script>
13 </form>
14 <button onclick="int=window.clearInterval(int)">Stop interval</button>
15
16 </body>
17 </html>
setTimeout() 方法
使用对象为:HTML DOM Window 对象
定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec)
参数 | 描述 |
---|---|
code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
millisec | 必需。在执行代码前需等待的毫秒数。 |
提示和注释
提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
实例
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be
displayed after 5 seconds.</p>
</body>
</html>
简单的计时器
1 <html>View Code
2 <head>
3 <script type="text/javascript">
4 function timedMsg()
5 {
6 var t=setTimeout("alert('5 seconds!')",5000)
7 }
8 </script>
9 </head>
10
11 <body>
12 <form>
13 <input type="button" value="显示计时的消息框!" onClick = "timedMsg()">
14 </form>
15 <p>点击上面的按钮。5 秒后会显示一个消息框。</p>
16 </body>
17
18 </html>
1 <html>View Code
2 <head>
3 <script type="text/javascript">
4 function timedText()
5 {
6 var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)
7 var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)
8 var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)
9 }
10 </script>
11 </head>
12
13 <body>
14 <form>
15 <input type="button" value="显示计时的文本!" onClick="timedText()">
16 <input type="text" id="txt">
17 </form>
18 <p>在按钮上面点击。输入框会显示出已经流逝的 2、4、6 秒钟。</p>
19 </body>
<html>View Code
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
<html>View Code
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">
</form>
<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>
</body>
</html>