关于setInterval() 和setTimeout()的使用

时间:2022-06-02 23:35:12

参照W3C标准:

 

setInterval() 方法

使用对象为 HTML DOM Window 对象

定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec

必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

实例

关于setInterval() 和setTimeout()的使用关于setInterval() 和setTimeout()的使用
 1 <html>
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>
View Code

 

 

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>

简单的计时器

关于setInterval() 和setTimeout()的使用关于setInterval() 和setTimeout()的使用
 1 <html>
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>
View Code
关于setInterval() 和setTimeout()的使用关于setInterval() 和setTimeout()的使用
 1 <html>
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>
View Code
关于setInterval() 和setTimeout()的使用关于setInterval() 和setTimeout()的使用
<html>
<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>
View Code
关于setInterval() 和setTimeout()的使用关于setInterval() 和setTimeout()的使用
<html>
<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>
View Code