JS中setTimeout()的用法详解(2)

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( )

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4a417562bf5b8879ee14b7d5de7dc66e.html