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

参照W3C标准：

setInterval() 方法

使用对象为 HTML DOM Window 对象

定义和用法

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

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

语法

setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

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

实例

 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>

简单的计时器

 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

 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

<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

<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

posted on 2014-04-14 19:52 花未眠1005 阅读(193) 评论(0) 收藏举报

刷新页面返回顶部