setTimeout()的用法详解及实例
?
?
A: setTimeout( )
?
?
<html><body bgcolor=lightcyan text=red><h1> <font color=blue> 示范网页 </font> </h1> <p> </br><p> 请等三秒!<script>setTimeout("alert(‘对不起, 要你久候’)", 3000 )</script></body></html>?
?
<html><body bgcolor=lightcyan text=red><h1> <font color=blue> 示范网页 </font> </h1> <p> </br><script>function clearWord(){ window.status="" }</script><form><input type=”button” value="在状态栏显示文字" onClick=”window.status='hello' , setTimeout('clearWord()', 3000) “></form></body></html>?
?
<html><head><script>x = 0function countSecond( ){ x = x+1 document.fm.displayBox.value=x setTimeout(“countSecond( )”, 1000)}</script> </head><body bgcolor=lightcyan text=red> <p> </br><form name=fm><input type=”text” name=”displayBox” value=”0″ size=4 ></form><script>countSecond( )</script></body></html>?
?
<html><head><script>x=0y=-1function countMin( ){ y=y+1 document.displayMin.displayBox.value=y setTimeout("countMin( )",60000)}function countSec( ){ x = x + 1 z =x % 60 document.displaySec.displayBox.value=z setTimeout(“countSec( )”, 1000)}</script> </head><body bgcolor=lightcyan text=red> <p> </br><table> <tr valign=top> <td> 你在本网页的连接时间是: </td><td> <form name=displayMin><input type=”text” name=”displayBox” value=”0″ size=4 ></form> </td><td> 分 </td><td> <form name=displaySec> </td><td> <input type=”text” name=”displayBox” value=”0″ size=4 ></form> </td><td> 秒。</td> </tr> </table><script>countMin( )countSec( )</script></body></html>?
?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script>x = 0y = 0function count1(){ x = x + 1 document.display1.box1.value = x meter1=setTimeout("count1()", 1000)}function count2(){ y = y + 1 document.display2.box2.value = y meter2=setTimeout("count2()", 1000)}</script> </head><body bgcolor=lightcyan text=red> <p> </br><form name="display1"><input type="text" name="box1" value="0" size=4 ><input type=button value="停止计时" onClick="clearTimeout(meter1) " ><input type=button value="继续计时" onClick="count1() " ></form><p><form name="display2"><input type="text" name="box2" value="0" size=4 ><input type=button value="停止计时" onClick="clearTimeout(meter2) " ><input type=button value="继续计时" onClick="count2() " ></form><script>count1()count2()</script></body></html>?
?
<html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script>x=0function count(){ x = x + 1 document.display.box.value= x timeoutID=setTimeout("count()", 1000)}</script> </head> <body bgcolor=lightcyan text=red> <p> </br><form name=display><input type="text" name="box" value="0" size=4 ><input type=button value="停止计时" onClick="clearTimeout(timeoutID) " ><input type=button value="继续计时" onClick="count() " ></form> <p><script>count()</script></body> </html>?
?
<html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script>x = 0flag = 0function count(){ x = x + 1 document.display.box.value = x timeoutID=setTimeout("count()", 1000) flag = 1}function restart(){ if (flag==0) { count() }}</script> </head><body bgcolor=lightcyan text=red> <p> </br><form name="display"><input type="text" name="box" value="0" size=4 ><input type=button value="停止计时" onclick="clearTimeout(timeoutID); flag=0 " ><input type=button value="继续计时" onclick="restart() " ></form> <p><script>count()</script><form><input type=button value="Show flag"onClick="alert('The flag now is '+ flag) " ></form></body> </html>?
2. 在网页中, 你应见到三个按钮及文字框中的数字跳动。
3. 请你按 [Show flag] 这按钮, 应见到一个话对盒显示flag 是 1。
4. 请你按 [停止计时] 这按钮, 数字停止跳动, 请你按 [Showflag] 这按钮, 应见到话对盒显示 flag 是 0。
5. 请你按多次 [继续计时] 这按钮, 你应见到数字不会加快, 请你按 [Showflag] 这按钮, 应见到话对盒显示 flag 变回 1。
1. 这网页第 4 行有这一句: flag=0, 这是设定 flag 这变量及将初始值定为 0, 你也可将初始值定为 1, 随后有关的 0 和 1 对调。
2. count( ) 这 function 最后一句是 flag=1, 所以启动 count( ) 后, flag 就会变为 1。
3. [继续计时] 的按钮是用来启动restart( ), 这 function 有以下设定:
?
function restart( )
{ if (flag==0)
{ count( ) }
}
这处的 if statement 检查 flag 是否等于 0, 若是 0 就启动 count( ), 若是 1 (即不是 0) 就没有反应, 使用这方法, 若 count( ) 已在执行中, [继续计时] 这按钮不会有作用。
这处的 flag=1 设定, 实际设为 1 或 2 或 3 等数值都是一样的, 只要不是 0 就可以了, 所以这两个相对的旗标, 看似是“0″和 “1″, 实际是 “0″ 和 “non-zero” (非-0)。
4. [停止计时] 的按钮有以下设定:
onClick=”clearTimeout(timeoutID); flag=0 ”
这是停止 setTimeout( ) 的操作时, 同时将 flag 转回 0, 这使到 restart( ) 这 function 可以重新启动 count( )。
?
?
?
