cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器
3 g" w6 A2 ^9 s! i. _
  1. <script>
    . b9 v. `( m5 t: }
  2. //定时器 异步运行
    " z8 Y/ c! ~5 \, p" |
  3. function hello(){
    # ^& Y' A( \- q% U: y
  4. alert("hello");
    $ T6 n/ [. U/ s. R( }" M- D
  5. } " S7 |3 ]8 U' f7 N  ~. o
  6. //使用方法名字执行方法
    # A- X$ d" U) X$ m
  7. var t1 = window.setTimeout(hello,1000); ; M2 y) b! y: d4 u: v$ c8 h% R% h
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 % R( v  f* m- D$ ]
  9. window.clearTimeout(t1);//去掉定时器
    ' ^4 {0 ?' X& e: Q
  10. </script>
复制代码
2，重复执行的定时器 5 ?9 H) x1 e+ d- ~/ B
  1. <script>
    # ~- D2 q. M" n% A9 F
  2. function hello(){ ) N9 ?, t8 Q0 Q  v9 `
  3. alert("hello"); ; a$ t! |* ~( E
  4. } 0 S, l1 _' |5 J2 _' g  |
  5. //重复执行某个方法 " W4 @3 k: n% Y* \
  6. var t1 = window.setInterval(hello,1000); * d- p: W5 Z. S; ]3 `
  7. var t2 = window.setInterval("hello()",3000); ) s1 ~2 {$ n1 `4 z- a
  8. //去掉定时器的方法 - V5 C( I7 Y3 `. j
  9. window.clearInterval(t1);
    % Q( S+ d: _) _) l, L/ M  L
  10. </script>
复制代码
备注： % f5 T& h* v( D' W4 g0 R2 y" _& H

  v, w$ \; U8 t2 U: e. p0 I1 e如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
2 T: i8 M. J1 ?: J2 ~可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。
3 t+ U1 {6 D6 v- ^" B8 E, i8 h* X- _) v4 ~" z2 b" c" H0 _

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

1.倒计定时器：timename=setTimeout("function();",delaytime);7 R$ q9 {4 i: j# S, X
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成$ U( z' e' G0 ^% u% m
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。1 Z! C. p" q# D* x8 }) X
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。" w6 Q5 _: r8 s* S* F7 |- J
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，5 s; c8 v, z3 b3 u# @
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。- u0 c& a* V+ B0 H  O; B
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。( K! u4 m& o. l5 a
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
8 @3 {7 P- z6 x9 S7 h& \setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
3 S* ~1 [$ O/ ?; V2 XclearInterval(对象) 清除已设置的setInterval对象

略举两例。* d1 k! ?' C3 S2 U  `& }3 h
例1.表单触发或加载时，逐字输出字符串

1 y& J9 T6 d  E$ T# K
  1. <html>/ n; _7 s( A; I
  2. <head>7 n) `2 O2 S' A8 U6 }; M7 a. J1 D
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />; ~& V; A/ W' A" ?% R; V- v5 j6 Q: d
  4. <title>无标题文档</title>
    ( L1 w- b) U" T" t. i
  5. <script language="JavaScript" type="text/javascript">& A. R% V$ C1 W, n- g
  6. var str = "这个是测试用的范例文字";0 {, L: R3 c& p. y+ {
  7. var seq = 0;
    ' ?. I1 O7 e" A' t7 e6 o
  8. var second=1000; //间隔时间1秒钟- e+ l  c$ Q1 K
  9. function scroll() {
    + S4 T: s& v5 Y" O* U0 T
  10. msg = str.substring(0, seq+1);
    $ n# P7 W5 X6 E( a, R# h
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    * w2 \" d. }. t& A2 J
  12. seq++;
    & _3 o, H6 {  y8 U; I& S$ C
  13. if (seq >= str.length) seq = 0;
    + y6 Y& m  l' y# ?+ c$ T. S# p
  14. }
      e6 Z/ h( o. j9 q- l$ S; ~
  15. </script>$ L) J, w- F* @% x0 w; C% p
  16. </head># x8 S7 [" l- B
  17. <body onload="setInterval('scroll()',second)">/ D0 E, C- c, H/ @& R8 m
  18. <div id="word"></div><br/><br/>
    . b; b  [+ u; q
  19. </body>5 \( ~! Q0 N2 ?& R; p) w3 i0 i! h
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。6 A$ y. Y$ h' w9 F& p- @, {- I- v
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) ~2 z. v/ b  M9 x8 O/ Y0 {) Y) M
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    . `  h" O5 K2 l( A- R  n
  3. <head>
    . D) l9 \' M8 ~0 y+ r
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 j& g) S0 _! b
  5. <title>无标题文档</title>
    0 }3 h$ v0 d% l! R1 r# u1 t% r
  6. <script language="JavaScript" type="text/javascript">5 R) B- L. o! \! M) U' M- i  J
  7. var second=5000; //间隔时间5秒钟
    ' z- R$ N+ l* y0 N  c
  8. var c=0;
    6 {: U8 a# f4 p/ Y+ T+ |: u2 E
  9. function scroll() {
    7 D, g2 k: ?) V+ E, D1 k0 A( Z8 ^
  10. c++;5 |- I. V" u* o# |
  11. if ("b" == document.activeElement.id) {, g9 `% ]: D1 Y2 F
  12. var str="定时检查第<b> "+c+" </b>次<br/>";0 A" O" g0 w$ j$ ^( R
  13. if(document.getElementByIdx_x_x('b').value!=""){0 E; ~# |- r1 i* N
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";0 V5 d$ u8 ?, V* c- d
  15. }6 J' T& K4 s2 T7 @  N+ D
  16. document.getElementByIdx_x_x('word').innerHTML = str;" M" h* h# o" u6 J6 B
  17. }5 v* p8 ]! E% O
  18. }# m( p! X+ V6 R; D; ?) k9 e
  19. </script>
    9 W+ ]+ ~  V8 T+ v" l' k( e
  20. </head>
    $ O- k2 C4 C+ ?
  21. <body>
    # D$ U# ~3 w% @/ A: X3 U* ]+ _
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    8 ]1 c' _& H; h7 ~
  23. <div id="word"></div><br/><br/>
    " @: }& s. N, q- [- i
  24. </body>2 U6 l5 N1 }2 c$ |, H6 e. o: \
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。
2 V3 n9 B0 a5 H; N
  1. <html xmlns="http://www.w3.org/1999/xhtml">1 l" r% h: i& K! L
  2. <head>
    $ j) j% `+ w# y2 @& s
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />2 }8 ^  j5 f' E6 M9 w+ H
  4. <script language="javascript">) x% Z! {- J9 G3 p$ N+ t8 R
  5. function count() {, `  K) z4 C4 p: Q5 i- j5 n* r
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";8 J7 f4 m( {) T5 c& f
  7. setTimeout("alert('十秒钟到！')",10000)7 M% w, s5 _( M6 O
  8. }# _- l$ S. f3 G: B0 _8 c- V' e* j
  9. </script>( r& x" [: D7 [$ H" f
  10. <body>
    # b- r$ ^0 \- i; ]7 ^2 e
  11. <div id="m"></div>
    # y! a' m' h, X- Q7 {& k
  12. <input TYPE="button" value=" 计时开始" onclick="count()">
    : k2 G! Y( A" V7 f- a
  13. </body>8 {$ ]' R. p! I7 Y: @5 r
  14. </html>
复制代码
例4:倒计时定时跳转
/ ^7 K0 Z# W5 D) o& K; D) q
  1. <html>
    6 h- j# l; c9 g% E8 W" `
  2. <head>
    7 a4 f/ {# |: V: {/ g
  3.   <base href="<%=basePath%>">
    3 `4 l( a# ?. f4 e4 s0 L
  4.   <title>My JSP 'ds04.jsp' starting page</title>1 D! S3 I+ t7 S) ]* L
  5.   <span id="tiao">3</span>* P. l2 }( y! d6 l2 X& M
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……# F# D: T, c# y" o8 p
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
    3 a# t9 I9 Y% D3 g$ p8 L! k
  8.   <!--脚本开始-->) @. m* w* R* R* m$ d
  9.   <script language="javascript" type="">4 N- x* C7 `( T& ]
  10. function countDown(secs){2 O% a+ x& z1 A+ ?% U  p( J: d
  11. tiao.innerText=secs;
    0 y1 [. e: Z" N) {, F; j1 c
  12. if(--secs>0)- c. C- y' B0 e/ ?8 [
  13.   setTimeout("countDown("+secs+")",1000);
    6 z) l8 c7 e- {
  14. }+ Y1 F5 E$ _6 R$ X  s# J$ P
  15. countDown(3);
    3 o# [3 y4 ~% x' O9 o
  16. </script>
    ; e& o( B# g2 V# X7 O7 x
  17.   <!--脚本结束-->6 c" C+ L2 t) k9 E1 y0 u5 o
  18. </head>
复制代码
例6:, x% e, l+ f7 b7 f' C, b
  1. <head>
    . R( T, Q, \$ m+ z# J4 ]6 t
  2.     <meta http-equiv="refresh" content="2;url='b.html'"> 0 e. Z# V7 G) @, w
  3. </head>
复制代码
例7:7 `9 s1 a; `9 _+ H% X
  1. <script language="javascript" type="text/javascript">6 \: U$ b6 j* [' _9 U& o2 ?4 y2 g
  2. setTimeout("window.location.href='b.html'", 2000);0 y* X' B$ l; J; O
  3. //下面两个都可以用$ A% m  A+ T2 _. I) e% r
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    % a& ]: Y2 Q: U% F: l
  5. //setTimeout("window.location='b.html'", 2000);6 q0 ]) g+ \" C+ T+ S: |; C
  6. </script>
复制代码
例8:0 q& U/ f- {! n7 U# [2 N% v0 F
  1. <span id="totalSecond">2</span>
    6 P" D4 g- p2 M) W
  2. <script language="javascript" type="text/javascript">
    % X( T" ~- S8 p' h6 ]' ?
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;
    3 y3 u& F" w5 C% ?& S
  4. if(isNaN(second)){
    & c0 A5 `' B( W2 p) O
  5.   //……不是数字的处理方法9 M! N6 X* L6 A+ L2 o# w2 v
  6. }else{
    * w) }: a) z6 l. R) w4 `, c1 F$ J1 Y$ h
  7.   setInterval(function(){
    + `; R& A! g( l9 e' j
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;5 p' d  I& J7 S* ^, r. L
  9.    if (second <= 0) {- W9 S% P& v8 U0 V3 L" d, k
  10.     window.location = 'b.html';
    * |5 J( y8 @+ `- I3 v2 I
  11.    }
    , C0 M4 \1 d  V/ B7 g9 W
  12.   }, 1000);
    * X) y1 G2 X3 C3 F; a# }
  13. }
    ( v! i$ ]/ z. B  W' d; m) R3 b
  14. </script>
复制代码
, [8 ?3 j3 J4 P& Z% C
4 I. t2 o1 F5 {0 u8 i
2 t( _4 t  u+ H! F# C6 g




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