cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器 . C( q1 ]" i: ]; N
  1. <script> / T- P& P. e- ~9 o& Q  ~
  2. //定时器 异步运行
    * Y) b# B$ v; `# C  m& i! C3 n7 B
  3. function hello(){   G0 n5 o- ]) c2 Q& z8 R3 z7 ]$ d
  4. alert("hello"); $ P6 n5 j3 a- G5 u' d5 d9 w* _. I6 F4 e
  5. } ) Y- `  D( s0 C8 }- n
  6. //使用方法名字执行方法 3 h0 F" ?! g% {3 P; b
  7. var t1 = window.setTimeout(hello,1000);
    . }! S  a2 ~) W, @5 n
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    3 \0 c4 f9 l' K$ z9 r1 J4 ^' `" A
  9. window.clearTimeout(t1);//去掉定时器   _* w/ @* w9 A3 f6 n! A6 M; ^$ R
  10. </script>
复制代码
2，重复执行的定时器
- L& P% ]: p4 ^  r% c9 L; y
  1. <script> 9 x) U4 N1 O  [
  2. function hello(){ " y, H3 |: g4 ]. i
  3. alert("hello");
    # H9 J5 {1 N* u; Q" e# V5 N
  4. }
    ; m) N( J1 ]! Q; y+ `+ C
  5. //重复执行某个方法 , |: @" |" }. m$ ?7 U% v3 x& m
  6. var t1 = window.setInterval(hello,1000);
    & _( z* w, P# w
  7. var t2 = window.setInterval("hello()",3000);
    , }9 K7 f$ _7 i( l+ w$ T$ j
  8. //去掉定时器的方法   r2 x9 X4 p: r6 b4 `7 A
  9. window.clearInterval(t1); $ p( r  u+ k: ~) M; d2 C
  10. </script>
复制代码
备注：
5 V( g# F/ y6 N% ^2 l% J0 |3 r
# A5 @- u- X- [$ V如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决： 6 V+ ^. a5 W. r8 D4 h0 n
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。
' M( U& L/ Q# F( O* O7 p6 M& S
8 S) l9 l$ }7 f0 N0 Z* B3 T

在javascritp中，有两个关于定时器的专用函数，分别为：

1.倒计定时器：timename=setTimeout("function();",delaytime);5 p' m7 f0 p" H1 Q# q
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
7 k0 j/ n  Y/ `$ h& N/ j“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。, x# r9 {( H; z6 O* g
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
' l+ d4 }- x0 {: o+ q& }比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，5 V0 D) r( D+ F/ i9 O: Z1 b
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。* a' M( f2 y4 _+ `( j. d$ G
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

用以指定在一段特定的时间后执行某段程序。

JS中定时执行,setTimeout和setInterval的区别,以及l解除方法

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
+ X* ^# }) `2 O( R6 ]; i8 k" usetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
- {3 t: W  N4 c" E# V. R: L# I- \setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象) y. ~" i* E7 s) p# [- m
clearInterval(对象) 清除已设置的setInterval对象

略举两例。- K6 o6 O8 w, Q
例1.表单触发或加载时，逐字输出字符串


. I7 i* ~* n& T+ C. j
  1. <html>' t- Y1 o2 T& R2 x
  2. <head>1 I/ b8 q; Y5 n( S# \
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    2 U  }5 {5 n* Q) j
  4. <title>无标题文档</title>
    4 P! p6 E8 g2 u
  5. <script language="JavaScript" type="text/javascript">- {6 u& \1 g# U, _8 \2 x. f6 h
  6. var str = "这个是测试用的范例文字";
    ' m, g4 G; h* ~9 @( e
  7. var seq = 0;
    : L& v, m; C) m: H
  8. var second=1000; //间隔时间1秒钟+ m% e5 ~6 b* Y1 d2 H
  9. function scroll() {
    ' ]$ W! g/ \, U* U
  10. msg = str.substring(0, seq+1);
    # v' r0 c/ @0 ?# x* ?
  11. document.getElementByIdx_x_x('word').innerHTML = msg;! d# i7 y$ ^6 T. q$ f
  12. seq++;
    . r9 m7 W( s# ~" T. g9 M5 ]! s% d
  13. if (seq >= str.length) seq = 0;
    / V9 H( i! q2 h
  14. }3 d% W3 I4 [: ~7 N+ u7 T9 S
  15. </script># F+ `0 F% t$ n& \& E/ r. u* d
  16. </head>! M, Z. X4 E: z1 c5 R8 _' P
  17. <body onload="setInterval('scroll()',second)">
    # f3 C* K, {6 x5 H
  18. <div id="word"></div><br/><br/>9 F1 ?; z8 K4 h) a6 G
  19. </body>5 c# j& m  Y! b; D4 Q! D7 G
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。3 X9 H( r: `1 p
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    5 s8 _" |: {# i1 q6 t
  2. <html xmlns="http://www.w3.org/1999/xhtml">( P& n# q4 y/ g  \% o+ h% q9 a8 A. J
  3. <head>' p& F/ n( q/ o& u  d3 C
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 _6 n+ J/ _+ O* N# A, }, K. X
  5. <title>无标题文档</title>* G' w; M1 `" C# K1 B5 o) t  k
  6. <script language="JavaScript" type="text/javascript">
    & B0 R( [( }" e9 D* C
  7. var second=5000; //间隔时间5秒钟  ^/ p' {0 ~8 ~  r( ^! w& n
  8. var c=0;
    . `3 Q+ n: z, _1 c% O
  9. function scroll() {. |/ {" M( S% R4 l( {- s: @. f
  10. c++;" P, \3 }' H; b( t( A7 l" d. o
  11. if ("b" == document.activeElement.id) {
    . Q  t% U3 f) ]( K1 \
  12. var str="定时检查第<b> "+c+" </b>次<br/>";
    9 h# t. L9 z9 u5 ?9 V* g' }. ^4 U
  13. if(document.getElementByIdx_x_x('b').value!=""){
    0 L0 ~& {* \2 h5 r
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";7 A0 R5 Y" R+ ~  D
  15. }+ c" @5 M9 ^+ D" j# o7 A; ]
  16. document.getElementByIdx_x_x('word').innerHTML = str;' L% K4 R0 q* X( J; f1 r$ n  s
  17. }
    5 Q6 F4 w/ x; x% r5 s  R
  18. }
    ! |% W+ B' ?' e& p0 o) W0 k. p
  19. </script>
    - e- Z9 d) J; O/ S, h8 C6 d2 f( M
  20. </head>% z6 `( _$ w0 u% y/ E( U) q
  21. <body>
    ) Z  r9 W, U& v' U& m
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    ! z% Y3 F# f- n2 S. ~9 b
  23. <div id="word"></div><br/><br/>
    ! {. X3 p# I/ N7 a% o) A7 j
  24. </body>  h2 l$ G) R4 R
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。; f9 J, h( _. p6 U% B2 W; Y
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    7 ^" O3 d( |- B8 e4 h
  2. <head>  F- ~) d5 \, H" K. p# d
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    . a3 s$ N0 |7 G5 p& ?! H, a, W$ h; g
  4. <script language="javascript">
    9 T. _$ Z6 ^. @* @+ f: _
  5. function count() {
    5 V9 M: e- u5 h0 J" ^
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
      T; ]" w& }% |+ H* B
  7. setTimeout("alert('十秒钟到！')",10000)  m0 |1 q5 K3 w
  8. }8 q7 o7 t% }8 x+ s5 u3 S' W( U
  9. </script>
    + U5 w; Y1 w) z: q9 ^; J3 S
  10. <body>
    ( [* j1 D& R: Y
  11. <div id="m"></div>
    ) y* @8 _7 z3 `, C" X+ t
  12. <input TYPE="button" value=" 计时开始" onclick="count()">3 M4 H) |5 T! T' V  F; C) I- e
  13. </body>$ Z( l$ J: f, q/ {& _
  14. </html>
复制代码
例4:倒计时定时跳转
" [7 U1 K- k& p0 \4 B
  1. <html>; b. I0 X! \9 ^  L* F8 s+ I% T
  2. <head>1 R5 F9 T! C' {; F5 x" ~6 e$ {$ z
  3.   <base href="<%=basePath%>">
    " o. N7 s' z1 {9 I0 k& A2 |: y4 W
  4.   <title>My JSP 'ds04.jsp' starting page</title>
    5 O7 R/ R$ _; f% N7 S) v
  5.   <span id="tiao">3</span>
    3 g8 }8 t# d+ D3 p9 Y; U3 |
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……% @' b4 g/ ]9 P* N- Q
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
    7 w6 ~# U2 ]1 ~1 r* N7 ~1 R
  8.   <!--脚本开始-->* k7 P. y+ j; c3 F5 N
  9.   <script language="javascript" type="">; g) d" _% I% |* K0 g
  10. function countDown(secs){
    , d* O2 R  [/ Z1 r2 s
  11. tiao.innerText=secs;4 G! ^! ~0 j( D
  12. if(--secs>0)! L5 z. W4 ?7 j* K# o  I2 a
  13.   setTimeout("countDown("+secs+")",1000);
    : h; I- v" Z4 o
  14. }
    * r4 C  Y+ _+ Z' Q1 y6 U
  15. countDown(3);
    ; a# V( V7 O3 G2 j+ \
  16. </script>
    + x1 r/ c* x- |
  17.   <!--脚本结束-->: P. H1 P+ E- i2 u
  18. </head>
复制代码
例6:. J" ^7 ?. q1 L* A2 Z( K- T5 c# a' q
  1. <head> 9 E7 G# C' Y* L  V# A
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
      x. E4 [; M: q
  3. </head>
复制代码
例7:5 K( W" k+ b! m5 T
  1. <script language="javascript" type="text/javascript">/ s& Q* T& H/ \
  2. setTimeout("window.location.href='b.html'", 2000);: |* t: m7 `& h9 f6 s7 q4 E
  3. //下面两个都可以用
    6 N2 F! ~& t6 Z* }
  4. //setTimeout("javascript:location.href='b.html'", 2000);# A4 }4 n4 Z; o
  5. //setTimeout("window.location='b.html'", 2000);
    : Y+ D5 N9 J5 @# y& w% X$ {
  6. </script>
复制代码
例8:( ?! Q7 S8 x1 O: D6 q% _% V& t
  1. <span id="totalSecond">2</span>0 p  q, I4 @3 N4 i. j9 b' z3 K
  2. <script language="javascript" type="text/javascript">+ r1 }  D3 m  `( ?
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;2 P" g+ c: e: F, J* n; o! T
  4. if(isNaN(second)){
    2 |" J! U( e  ]! Y( y1 K
  5.   //……不是数字的处理方法
    4 i9 T; k( ]8 ^8 l/ c
  6. }else{
    1 g  M5 }( v( f; q! A
  7.   setInterval(function(){) U; a5 X0 u( H; n1 ]: Z, c4 J& b
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;
    0 L; H( l4 G7 t0 B9 w
  9.    if (second <= 0) {, h6 z# z: M% n: {8 g# w0 M/ f
  10.     window.location = 'b.html';9 s  |* {& c6 N5 G4 T
  11.    }
    2 g8 k! H5 C, \! u6 Y
  12.   }, 1000);" k  q8 k3 y! v5 \
  13. }
    7 |! J+ y1 r) J# }
  14. </script>
复制代码
; L& m' s; b2 f( P8 D/ l4 b! O& q
, k4 V  P+ A8 b2 [" w1 i

3 ~" c3 a  W9 P/ t% Y5 J6 D



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2