1. 这网页有两个 script, 第一个是设定 countSecond( ) 这个 function, 第二个在后的是在网页完全载入后, 就启动这 function。
2. 留意今次以下的设定:
function countSecond( ) { x = x+1 document.fm.displayBox.value = x setTimeout("countSecond()", 1000) }
当 countSecond( ) 启动后, 就会启动 setTimeout( ), 这个 method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动 setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。
3. 在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行, 其中一个用途是显示转动时间, 另一个用途是设定跑动文字, 随后的章节会有例子。
用上述的方法设定时间, setTimeout( ) 虽然设定了是一秒, 但浏览器还有另外两项功能要执行, 所以一个循环的时间是稍多于一秒, 例如一分钟可能只有58 个循环。
4. 设定条件使 setTimeout( ) 停止
setTimeout( ) 的迴圈开始后, 就会不断重複, 在上个练习, 你看到文字框的数字不断跳动, 但我们是有方法使到数字跳到某一个数值就停下来, 其中一个方法是用 if...else 设定一个条件, 若是 TRUE 就继续执行 setTimeout( ) , 若是 FALSE 就停止。
例如要使到上个练习的 counter 跳到 20 就停下, 可将有关的 function 作以下的更改。
function countSecond( ) { if ( x < 20 ) { x = x + 1 document.displaySec.displayBox.value = x setTimeout("countSecond( )", 1000) } }
5. 计分及计秒的 counter
在前面的练习, 相信你已学识如何使用 setTimeout( ), 现在请你看一个较複习的例子。
练习-72 计时的 counter
在这练习, 你要设定两个文字框, 一个显示分钟, 另一个显示秒, 网页开启后, 就会在这两个文字框中自动计时。
1. 请用浏览器开启示范磁碟中的timeout4.htm, 这档桉有以下内容:
<html> <head> <script> x=0 y=-1 function 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=lightcyantext=red> <p> </br> <table> <tr valign=top> <td> 你在本网页的连线时间是:</td> <td> <form name=displayMin> <input type="text"value="0" size=4 > </form> </td> <td> 分 </td> <td> <form name=displaySec></td> <td> <input type="text"value="0" size=4 > </form> </td> <td> 秒。</td> </tr> </table> <script> countMin( ) countSec( ) </script> </body> </html>
2. 请你留意两个文字框中的数字转变。
1. 这网页有两个 function, 一个用来计分钟, 一个用来计秒。在这处, 笔者只是示范setTimeout( ) 的操作, 因为计时器有其他更精简的写法。(留意: 这方式的计时并不准确。)
2. 留意计秒的 function:
function countSec( ) { x = x + 1 z = x% 60 document.displaySec.displayBox.value=z setTimeout("countSec()", 1000) }
这处的 % 符号是 modulus (馀数), 例如z = x % 60 表示先进行 x / 60, 得出的馀数作为 z 这变数, 例如 82 秒, modulus 就是 22, 所以文字框会显示 22 而不是 82。
3. 若你要将单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:
function countSec( ) { x = x + 1 z = x % 60 if (z < 10) { z = "0"+ z } document.displaySec.displayBox.value=z setTimeout("countSec()", 1000) }
10.2 clearTimeout( )