JS中setTimeout()的用法详解_javascript技巧

来源:脚本之家  责任编辑:小易  

1.SetTimeOut()1.1 SetTimeOut()语法例子1.2 用SetTimeOut()执行Functio1.3 SetTimeOut()语法例子1.4 设定条件使SetTimeOut()停止1.5 计分及秒的counter2.ClearTimeout()3.Set FlagetTimeout()是属于 window 的 method,但我们都是略去 window 这顶层物件名称,这是用来设定一个时间,时间到了,就会执行一个指定的 method。请先看以下一个简单,这是没有实际用途的例子,只是用来示范 setTimeout()的语法。练习-69 等候三秒才执行的 alert()在 第 3 章 说到 alert 对话盒,一般是用按钮叫出来,在这练习,你会看到网页开启后 3 秒,就会自动出现一个 alert 对话盒。1.请用浏览器开启示范磁碟中的 timeout1.htm,这档案有以下内容:示范网页</font></h1><p></br>请等三秒!setTimeout("alert('对不起,要你久候')",3000)</script></body></html>2.留意网页开启后三秒,就会出现一个 alert 对话盒。etTimeout()是设定一个指定等候时间(单位是千分之一秒,millisecond),时间到了,浏览器就会执行一个指定的 method 或 function,有以下语法:今次例子是设定等 3 秒(3000 milliseconds),浏览器就会执行 alert()这一个method。etTimeout()通常是与 function 一起使用,以下是一个较上个练习复杂的例子。练习-70 状态列中自动消失的文字在练习-20,你看过如何用按钮在状态列显示文字,然后再用按钮消除文字,在这练习,你看到如何用按钮在状态列显示文字,而这文字会在三秒后自动消失。1.请用浏览器开启示范磁碟中的 timeout2.htm,这档案有以下内容:示范网页</font></h1><p></br>function clearWord(){ window.status=""}</script><form>在状态列显示文字"onClick="window.status='Hello',setTimeout('clearWord()',3000)"></form></body></html>2.请在按钮上按一下,你应见到状态列出现 Hello 这字,留意过了三秒,这字就会消失。1.这处先设定一个名为 clearWord()的 function,作以下定义:window.status="这是用来消除状态列的文字(请看练习-20 的说明),浏览器执行 clearWord(),就会消除状态列的文字。2.今次按钮设定了启动以下两项工作,用,分隔,浏览器会顺序执行这两项工作:onClick="window.status='Hello',setTimeout('clearWord()',3000)3.今次的 setTimeout()有以下设定:这是设定等 3 秒(3000 milliseconds)浏览器就会执行 clearWord()这一个function。在第 2 章,你看过如何使到父视窗开启时自动开启一个子视窗,若观看者不关闭这子视窗,这子视窗就会一路开启。看过以上的练习,请你设计一个会开启子视窗的网页,而这子视窗在开启后两秒,就会自动关闭。etTimeout()预设只是执行一次,但我们可以使用一个循环方式,使到一个setTimeout()再启动自己一次,就会使到第二个 setTimeout()执行,第二个又启动第三个,这样循环下去,这 setTimeout()就会不断执行。练习-71 自动每秒加 1 的 functio在这练习,你看到如何使用 setTimeout()令文字框的数值每秒就加 1,当然你也可以设定其他递增的速度,例如每五秒就加 5,或每五秒就加 1。1.请用浏览器开启示范磁碟中的 timeout3.htm,这档案有以下内容:2.网页开启后,请你留意文字框中的数值转变。3.请你将这档案复制去硬碟,更改一些设定,例如 x=x+5,或将等候时间改为5000,看有什么反应。1.这网页有两个 script,第一个是设定 countSecond()这个 function,第二个在后的是在网页完全载入后,就启动这 function。2.留意今次以下的设定:当 countSecond()启动后,就会启动 setTimeout(),这个 method 在一秒后又启动 countSecond(),countSecond()启动后又启动 setTimeout(),所以得出的结果是 countSecond()每秒执行一次。3.在 JavaScript,我们是使用这处说的方法使到一些事项不断执行,其中一个用途是显示转动时间,另一个用途是设定跑动文字,随后的章节会有例子。用上述的方法设定时间,setTimeout()虽然设定了是一秒,但浏览器还有另外两项功能要执行,所以一个循环的时间是稍多于一秒,例如一分钟可能只有58 个循环。etTimeout()的回圈开始后,就会不断重复,在上个练习,你看到文字框的数字不断跳动,但我们是有方法使到数字跳到某一个数值就停下来,其中一个方法是用 if.else 设定一个条件,若是 TRUE 就继续执行 setTimeout(),若是 FALSE 就停止。例如要使到上个练习的 counter 跳到 20 就停下,可将有关的 function 作以下的更改。在前面的练习,相信你已学识如何使用 setTimeout(),现在请你看一个较复习的例子。练习-72 计时的 counter在这练习,你要设定两个文字框,一个显示分钟,另一个显示秒,网页开启后,就会在这两个文字框中自动计时。1.请用浏览器开启示范磁碟中的 timeout4.htm,这档案有以下内容:(){ y=y+1 document.displayMin.displayBox.value=y setTimeout("countMin()",60000)}2.请你留意两个文字框中的数字转变。1.这网页有两个 function,一个用来计分钟,一个用来计秒。在这处,笔者只是示范setTimeout()的操作,因为计时器有其他更精简的写法。(留意:这方式的计时并不准确。2.留意计秒的 function:这处的%符号是 modulus(馀数),例如 z=x%60 表示先进行 x/60,得出的馀数作为 z 这变数,例如 82 秒,modulus 就是 22,所以文字框会显示 22 而不是 82。3.若你要将单位数字在前加上 0,例如 01,02,03 等,可用以下方法:在前一节,你看过如何使用 setTimeout()来使到浏览器不断执行一个 function,当一个 setTimeout()开始了循环的工作,我们要使它停下来,可使用 clearTimeout()这 method。clearTimout()有以下语法:clearTimeout(timeoutID)要使用 clearTimeout(),我们设定 setTimeout()时,要给予这 setTimout()一个名称,这名称就是 timeoutID,我们叫停时,就是用这 timeoutID来叫停,这是一个自订名称,但很多程式员就以 timeoutID 为名。在下面的例子,笔者设定两个 timeoutID,分别命名为 meter1 及 meter2,如下:timeoutID↓meter1=setTimeout("count1()",1000)meter2=setTimeout("count2()",1000)使用这 meter1 及 meter2 这些 timeoutID 名称,在设定 clearTimeout()时,就可指定对哪一个 setTimeout()有效,不会扰及另一个 setTimeout()的操作。练习-73 可停止的 setTimeout()这练习以练习-71 为蓝本,但作了两个改变:(1)有两个 setTimeout(),(2)有两个按钮,分别可停止这两个 setTimout()。1.请用浏览器开启示范磁碟中的 clear.htm,这档案有以下内容:2.留意网页中的两个文字框及内里变动的数字,每个文字框旁有两个按钮,请你试试两个按钮的反应。3.请你连续按多次[继续计时]的按钮,留意数值的跳动加快了,原因是每按一次就启动 function 一次,每个 function 都令数值跳动,例如启动同一的 function 四次,就会一秒跳四次。(请看下一节)前个练习说到我们用一个按钮来启动一个 function,每按一下就会启动这 function 一次,请看以下例子。练习-74 效果重复的 setTimeout()这练习实际是将 练习-73 简化,只有一个计时器,笔者想示范的是每按[继续计时]一次,就会启动 count()这 function 一次。1.请用浏览器开启示范磁碟中的 flag1.htm,这档案有以下内容:count()</script></body></html>2.网页开启后,你应见到文字框中的数字跳动,请你按四次[继续计时],留意这会加快数字跳动,原因是有关的 function 被开启了多个,每个都会使数字转变。3.按了四次[继续计时]的按钮后,请你按[停止计时]的按钮,你会发现要按五次才能停止数字跳动。在编写程式时,我们常要提防使用者作出一些特别动作,例如使用者按两次[继续计时]按钮,这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢?这就不会产生重复效果。笔者藉这处的例子(随后还有多个例子),解说程式中一个 set flag(设定旗标)的概念,flag 是一个记认,一般来说,这可以是 0 或是 1(也可用 on 或 off,或任何两个自选的名称或数字),但也可以是 2、3、4 或更大的数字,在这例子有以下设定:1.程式开启时 flag=0。2.当 counter()执行时会顺便将 flag 变为 1。3.在[继续计时]这按钮的反应中,会先检查 flag 是 0 或是 1,若是 0 就会产生作用,若是 1 就没有反应。4.使用这 flag 的方式,count()这 function 开启后,[继续计时]这按钮就没有作用。这处的 flag 是一个变数,可任意取名,我们用 flag来称呼这变数的原因,是因为这变数好处一支旗,将旗竖起(flag is on),就会产生一个作用,将旗放下(flag is off),就产生另一个作用。练习-75 只可开启一次的 functio这练习是将上个练习加多一个 flag,使到每次只能有一个 count()这 function 在进行。1.请用浏览器开启示范磁碟中的 flag2.htm,这档案有以下内容:function restart(){ if(flag=0){ count()} }</script></head>count()input type=button value="Show flag"onClick="alert('The flag now is '+flag)"></form></body></html>2.在网页中,你应见到三个按钮及文字框中的数字跳动。3.请你按[Show flag]这按钮,应见到一个话对盒显示 flag 是 1。4.请你按[停止计时]这按钮,数字停止跳动,请你按[Show flag]这按钮,应见到话对盒显示 flag 是 0。5.请你按多次[继续计时]这按钮,你应见到数字不会加快,请你按[Show flag]这按钮,应见到话对盒显示 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 ..www.zgxue.com防采集请勿采集本网。

    setTimeout
      setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止 计分及计秒的 counter
    clearTimeout Set flag

1. SetTimeOut()

setTimeout 函数的参数是 回调函数,时长.第一种写法是正常传递了一个匿名函数,能正确执行,而第二种方法,你在 demo 后加了(),所以 demo 立即执行了,传递到 setTimeout 里的是 demo()函数的返回值

1.1 SetTimeOut()语法例子

你先告诉浏览器,两千毫秒后把c元素移动到A位置,之后又接着告诉浏览器,2000毫秒后把c元素移动到B位置。两千毫秒后浏览器只能做一件事,就是把C移动到B位置。如果想达到你需要的效果,可以等第一句执行

1.2 用SetTimeOut()执行Function

setTimeout是在设置的时间后执行,只执行一次,而setInterval是每隔一段时间就执行一次

1.3 SetTimeOut()语法例子

(2)另外setTimeout()方法也同样可以返回一个ID值,以方便使用clearInterval()方法 对使用setTimeout()方法的取消。4. charset=utf-8\"/> type=\"text/javascript\"> function timedMsg(){ var t=

1.4 设定条件使SetTimeOut()停止

都是window,蜜

1.5 计分及秒的counter

2. ClearTimeout()

3. Set Flag

10.1 setTimeout( )

  setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。

1. setTimeout( ) 语法例子

练习-69 等候三秒才执行的 alert( )

  在 第 3 章 说到 alert 对话盒, 一般是用按钮叫出来, 在这练习, 你会看到网页开启后 3 秒, 就会自动出现一个 alert 对话盒。

1. 请用浏览器开启示范磁碟中的timeout1.htm, 这档桉有以下内容:

<html> <body bgcolor=lightcyan text=red><h1> <font color=blue> 示范网页 </font> </h1> <p> </br><p> 请等三秒!<script>setTimeout("alert('对不起, 要你久候')", 3000 )</script></body> </html>

2.留意网页开启后三秒, 就会出现一个 alert 对话盒。

setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:

今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。

2. 用 setTimeout( ) 来执行 function

  setTimeout( ) 通常是与 function 一起使用, 以下是一个较上个练习複杂的例子。

练习-70 状态列中自动消失的文字

  在练习-20, 你看过如何用按钮在状态列显示文字, 然后再用按钮消除文字, 在这练习, 你看到如何用按钮在状态列显示文字, 而这文字会在三秒后自动消失。

1. 请用浏览器开启示范磁碟中的timeout2.htm, 这档桉有以下内容:

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

2.请在按钮上按一下,你应见到状态列出现 Hello 这字, 留意过了三秒, 这字就会消失。

1. 这处先设定一个名为 clearWord( ) 的 function, 作以下定义:

window.status=""

  这是用来消除状态列的文字 (请看练习-20 的说明), 浏览器执行 clearWord( ) , 就会消除状态列的文字。

2. 今次按钮设定了启动以下两项工作, 用 , 分隔, 浏览器会顺序执行这两项工作:

onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "

3. 今次的 setTimeout( ) 有以下设定:

这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个function。

在第 2 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启后两秒, 就会自动关闭。

3. 不断重複执行的 setTimeout( )

  setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( ) 再启动自己一次, 就会使到第二个 setTimeout( ) 执行, 第二个又启动第三个, 这样循环下去, 这 setTimeout( ) 就会不断执行。

练习-71 自动每秒加 1 的 function

  在这练习, 你看到如何使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度, 例如每五秒就加 5, 或每五秒就加 1。

1. 请用浏览器开启示范磁碟中的 timeout3.htm, 这档桉有以下内容:

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

2. 网页开启后, 请你留意文字框中的数值转变。

3. 请你将这档桉複製去硬碟, 更改一些设定, 例如 x = x+5, 或将等候时间改为5000, 看有什麽反应

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=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=lightcyantext=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>

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

  在前一节, 你看过如何使用 setTimeout( ) 来使到浏览器不断执行一个 function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这 method。

  clearTimout( ) 有以下语法: clearTimeout(timeoutID)

  要使用 clearTimeout( ), 我们设定 setTimeout( ) 时, 要给予这 setTimout( ) 一个名称, 这名称就是 timeoutID , 我们叫停时, 就是用这 timeoutID来叫停, 这是一个自订名称, 但很多程式员就以 timeoutID 为名。

  在下面的例子, 笔者设定两个 timeoutID, 分别命名为 meter1meter2, 如下:

timeoutID

 ↓

meter1 =setTimeout("count1()", 1000)

meter2 =setTimeout("count2()", 1000)

  使用这 meter1meter2 这些 timeoutID 名称, 在设定 clearTimeout( ) 时, 就可指定对哪一个 setTimeout( ) 有效, 不会扰及另一个 setTimeout( ) 的操作。

练习-73 可停止的 setTimeout( )

  这练习以练习-71为蓝本, 但作了两个改变: (1) 有两个 setTimeout( ), (2) 有两个按钮, 分别可停止这两个 setTimout( )

1. 请用浏览器开启示范磁碟中的clear.htm, 这档桉有以下内容:

<html> <head><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=lightcyantext=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>

2. 留意网页中的两个文字框及内裡变动的数字, 每个文字框旁有两个按钮, 请你试试两个按钮的反应

3. 请你连续按多次 [继续计时]的按钮, 留意数值的跳动加快了, 原因是每按一次就启动 function 一次, 每个 function 都令数值跳动, 例如启动同一的 function 四次, 就会一秒跳四次。(请看下一节)

10.3 Set flag

  前个练习说到我们用一个按钮来启动一个 function, 每按一下就会启动这 function 一次, 请看以下例子。

练习-74 效果重複的 setTimeout( )

  这练习实际是将 练习-73 简化, 只有一个计时器, 笔者想示范的是每按 [继续计时] 一次, 就会启动 count( ) 这 function 一次。

1. 请用浏览器开启示范磁碟中的flag1.htm, 这档桉有以下内容:

<html> <head><script>x=0function count( ){ x = x + 1  document.display.box.value= x  timeoutID=setTimeout("count()", 1000)}</script> </head> <body bgcolor=lightcyantext=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>

2. 网页开启后, 你应见到文字框中的数字跳动, 请你按四次 [继续计时], 留意这会加快数字跳动, 原因是有关的 function 被开启了多个, 每个都会使数字转变。

3. 按了四次 [继续计时] 的按钮后, 请你按 [停止计时] 的按钮, 你会发现要按五次才能停止数字跳动。

  在编写程式时, 我们常要提防使用者作出一些特别动作, 例如使用者按两次 [继续计时] 按钮, 这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢? 这就不会产生重複效果。

  笔者藉这处的例子 (随后还有多个例子), 解说程式中一个 set flag (设定旗标) 的概念, flag 是一个记认, 一般来说, 这可以是 0 或是 1 (也可用 on 或 off, 或任何两个自选的名称或数字), 但也可以是 2、3、4 或更大的数字, 在这例子有以下设定:

1. 程式开启时 flag=0。

2. 当 counter( ) 执行时会顺便将 flag 变为 1。

3. 在 [继续计时] 这按钮的反应中, 会先检查 flag 是 0 或是 1, 若是 0 就会产生作用, 若是 1 就没有反应。

4. 使用这 flag 的方式, count( ) 这 function 开启后, [继续计时] 这按钮就没有作用。

  这处的 flag 是一个变数, 可任意取名, 我们用 flag来称呼这变数的原因, 是因为这变数好处一支旗, 将旗竖起 (flag is on), 就会产生一个作用, 将旗放下 (flag is off), 就产生另一个作用。

练习-75 只可开启一次的 function

  这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。

1. 请用浏览器开启示范磁碟中的flag2.htm, 这档桉有以下内容:

<html> <head><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=lightcyantext=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. 请你按 [停止计时]这按钮, 数字停止跳动, 请你按 [Show flag] 这按钮, 应见到话对盒显示 flag 是 0。

5. 请你按多次 [继续计时]这按钮, 你应见到数字不会加快, 请你按 [Show flag]这按钮, 应见到话对盒显示 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()

1.setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval()方法会不停地调用函数,直到 clearInterval()被调用或窗口被关闭。由 setInterval()返回的 ID 值可用作 clearInterval()方法的参数。123456789101112131415161718<html><body> <input type="text" id="clock" size="35" /><script language=javascript>var int=self.setInterval("clock()",50)function clock(){ var t=new Date()document.getElementById("clock").value=t }</script></form>(int)">Stop interval</button></body></html>2.setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout()只执行 code 一次。123456789101112131415161718<html><head><script type="text/javascript">function timedMsg(){ var t=setTimeout("alert('5 seconds!')",5000)}</script></head><body><form>!onClick="timedMsg()"></form><p>Click on the button above.An alert box will be displayed after 5 seconds.</p></body></html>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js延迟加载(settimeout) js最后加载
  • js setinterval与settimeout(定时执行与循环执行)的代码(可以传入参数)
  • js函数settimeout延迟执行的简单介绍
  • javascript window.settimeout() 的详细用法
  • js settimeout 参数传递使用介绍
  • javascript setinterval与settimeout使用方法详解
  • js中settimeout()和setinterval() 何时被调用执行的用法
  • javascript中setinterval与settimeout的用法详解
  • js中setinterval、settimeout不能传递带参数的函数的解决方案
  • 如何通过settimeout理解js运行机制详解
  • javascript设计模式之门面模式原理与实现方法分析
  • 关于js中match() 和 exec() 返回值和属性的测试
  • react native listview 增加顶部下拉刷新和底下点击刷新示例
  • js防刷新的倒计时代码 js倒计时代码
  • nodejs与mysql的交互示例代码
  • 微信小程序模板和模块化用法实例分析
  • 关于bootstrap按钮组件消除黄框的方法
  • 5款javascript颜色选择器
  • event.keycode键码值表 附只能输入特定的字符串代码
  • 小程序实现展开/收起的效果示例
  • JS中SetTimeOut和SetInterval方法的区别?
  • 怎么js中settimeout
  • Js中SetTimeOut的用法
  • 关于js 中的setTimeout()的用法
  • 关于JS中setTimeOut的问题
  • JS中setTimeout的问题?
  • Js中setTimeout和setInterval的区别
  • js中setTimeout和setInterval工作原理有什么区别吗?
  • js中,在类中使用setTimeout
  • 关于js里面setTimeout的一个问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧js延迟加载(settimeout) js最后加载js setinterval与settimeout(定时执行与循环执行)的代码(可以传入参数)js函数settimeout延迟执行的简单介绍javascript window.settimeout() 的详细用法js settimeout 参数传递使用介绍javascript setinterval与settimeout使用方法详解js中settimeout()和setinterval() 何时被调用执行的用法javascript中setinterval与settimeout的用法详解js中setinterval、settimeout不能传递带参数的函数的解决方案如何通过settimeout理解js运行机制详解javascript设计模式之门面模式原理与实现方法分析关于js中match() 和 exec() 返回值和属性的测试react native listview 增加顶部下拉刷新和底下点击刷新示例js防刷新的倒计时代码 js倒计时代码nodejs与mysql的交互示例代码微信小程序模板和模块化用法实例分析关于bootstrap按钮组件消除黄框的方法5款javascript颜色选择器event.keycode键码值表 附只能输入特定的字符串代码小程序实现展开/收起的效果示例js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js删除数组里的某个元素方法javascript深入理解js闭包javascript title闪动效果js调用刷新界面的几种方式es6 generator函数详细解析opacity.jsjs实现上一页下一页的效果【附代码】js对象创建的几种方式整理bootstrap 弹出层代码js使用iview的dropdown实现一个右键菜单js网页右下角提示框实例bootstrap监听滚动实现头部跟随滚动
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved