1,只执行一次的定时器
9 I1 F) n, `( V( j o4 F U- <script> ) \* C$ N; ^; ?& \
- //定时器 异步运行
( e7 X5 z2 @' [! Y- R* v+ |- f6 j - function hello(){ - S- B. J. @& H& G8 n0 H# T' b0 f
- alert("hello"); 5 b) ^( p5 y8 Q& ]
- } A; |3 e( F- _
- //使用方法名字执行方法 # ] G. ?$ Q# J- X' b9 _
- var t1 = window.setTimeout(hello,1000); ) r; i0 \* o$ n) a, a% F
- var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
O2 f% n3 c7 h4 |2 ?6 ~ - window.clearTimeout(t1);//去掉定时器 - {/ y& ]' E# s( b3 U/ `9 \- P
- </script>
复制代码 2,重复执行的定时器
$ r5 q# X! h6 W* v- <script> 4 k" ~+ c" F& l9 l$ M
- function hello(){ ! p# \/ i4 Q! ]
- alert("hello"); 4 B9 T. c: E; t6 i( T @" \
- } 5 D% S. A; a4 ~* q n
- //重复执行某个方法
1 T3 z. H9 }5 w( d0 \5 Q5 v - var t1 = window.setInterval(hello,1000);
; B7 l* w ~/ o+ M - var t2 = window.setInterval("hello()",3000);
8 P% `6 f' L3 n9 G" x. u5 o - //去掉定时器的方法 ) [4 c5 d/ Z& _% o* l! x7 w$ `
- window.clearInterval(t1);
& ~! q1 o$ d1 i. ]- Z - </script>
复制代码 备注: ) g. N7 T! V2 i3 C5 a) @6 H5 x
9 I3 f; D# G; v; h' O2 A
如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
+ x- }% O K R( `7 ^可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。
! o$ x" k7 Z& v4 U
6 [( N! s3 h5 ]7 R在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);3 h3 `2 V) j/ Z' G, C' w
2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成, E; b/ a1 a! n9 `6 x+ I* x6 Y/ v' d
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。8 _) d! X9 N9 y7 |1 G
倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。. ~$ J6 ^7 R# k& T
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
$ |7 D/ a; {8 C. p, o) ]; F则需要用到循环定时器“setInterval("function();",delaytime)” 。 获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。6 \$ K$ }7 C7 {7 z- V/ E2 t
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。 定时器: 用以指定在一段特定的时间后执行某段程序。 JS中定时执行,setTimeout和setInterval的区别,以及l解除方法 setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。7 E% v& Q( Q" @
setTimeout("function",time) 设置一个超时对象 setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.: g& q8 ]( e$ e: |& {1 Q$ W9 c0 v3 m
setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复。 clearTimeout(对象) 清除已设置的setTimeout对象
6 y% k2 Y' H( g3 l" D: ?; i6 a, xclearInterval(对象) 清除已设置的setInterval对象 略举两例。
/ p- _5 a( P1 m例1.表单触发或加载时,逐字输出字符串
6 F/ Z, f, p E) `2 |- <html>6 z, ~% M) f+ k, z0 p
- <head>4 R A9 l% G5 ~; g' Y
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
* |$ X& B b% K - <title>无标题文档</title>6 C0 U7 U. x# r$ B0 ?
- <script language="JavaScript" type="text/javascript">
( X$ h2 o/ ^* k- I - var str = "这个是测试用的范例文字";
6 |: g% l( r# X* n4 t7 N - var seq = 0;7 K6 [8 ^- \. `7 h
- var second=1000; //间隔时间1秒钟
! W. a; r l- N$ v% a - function scroll() {* R& ]; ?( [; T) Q4 m4 B% ]0 u
- msg = str.substring(0, seq+1);/ ? b) }# e( F" V( }6 @
- document.getElementByIdx_x_x('word').innerHTML = msg;1 n' B, ]8 m: y( b* O1 g, I4 P8 G
- seq++;
2 N) h% j* c; M8 C' J" g6 k - if (seq >= str.length) seq = 0;
0 B9 s/ j. t1 \' h3 x - }
" D+ J2 K4 s' {+ _1 F - </script>7 I4 e3 K" v5 T5 @+ @% c
- </head>. f9 ^* x8 H3 ?+ Q! J( a8 K
- <body onload="setInterval('scroll()',second)">
- u. O1 Y( l3 w( J2 m - <div id="word"></div><br/><br/>9 e1 m& F4 T3 `5 G- M, w
- </body>
+ E- f% T2 W5 w$ j1 N - </html>
复制代码 例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
" e3 K0 w4 i! N1 V+ D0 e& ^6 l- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">$ N5 w4 u7 E" t7 x- N* b" B
- <html xmlns="http://www.w3.org/1999/xhtml">
' \+ W3 p. K0 x0 H" S. X' x4 j8 Y - <head>
6 M n0 A4 }& V4 ~5 {9 b% C7 B - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 m* Z8 q3 ]' u/ v a! N" e - <title>无标题文档</title>& L i9 Q, j; z9 I
- <script language="JavaScript" type="text/javascript">
/ V% l0 a( v. b8 _5 M, Z) K - var second=5000; //间隔时间5秒钟' \' a: u4 i, B, ]: ^. X; p
- var c=0;
* w5 t: U8 P: p! x& v1 w - function scroll() {5 X/ E, l9 F) T) |
- c++;
: j/ R2 l& @3 L. ^/ a: V - if ("b" == document.activeElement.id) {
6 `& g9 Z) g7 C0 a - var str="定时检查第<b> "+c+" </b>次<br/>";0 H) y9 ~6 f5 N" L& r; \
- if(document.getElementByIdx_x_x('b').value!=""){
; A0 ~ r# C' f2 h& \ - str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";/ c9 Q5 x; E- Z
- }( H/ c: G, I5 h
- document.getElementByIdx_x_x('word').innerHTML = str;4 a0 X' K1 n: J; D% k5 P
- }
9 `9 }2 [# M a - }
0 Z. o$ S# N! ^- B1 [, J" w( n - </script>) m6 F" w% X* O* y) a8 U
- </head>
. c% @! Y- O3 i9 w, y' D5 ` - <body>, p8 d2 U* B) A: S: G6 k
- <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
( w( X) `* i3 E- a" k- }0 V, P - <div id="word"></div><br/><br/>' N1 [! W' e7 n' Y' L
- </body># W# o* C4 j. t
- </html>
复制代码 例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
* R3 q" h) ^& t8 I* {- <html xmlns="http://www.w3.org/1999/xhtml">
" x; ?1 K2 | b - <head>
" c# f+ m' t, `$ R8 q1 @ - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
0 S1 A. P( n* Y! l6 B- y+ C - <script language="javascript">+ _* @1 U6 |" D2 ~
- function count() {4 W- Q4 x/ v% S0 w3 N- D4 m
- document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";3 f4 m4 y4 Z9 L0 q% u- S* ^
- setTimeout("alert('十秒钟到!')",10000). E! c: b/ I/ `1 e3 ?
- }
% x5 @, Q: h$ Q+ D3 |) _ - </script>
# s# i: P/ O( ^6 \9 ?) ^' E - <body>
7 o, @* @$ g! D/ f - <div id="m"></div>( y( D6 H& O- G6 N5 K% T* I
- <input TYPE="button" value=" 计时开始" onclick="count()">
) f8 i) ]" M/ q! H8 z - </body>0 g- a( ]+ {8 ^5 ]- a# _
- </html>
复制代码 例4:倒计时定时跳转
: Q j9 [. W( ]! E/ _9 k- <html>0 O; ^( D2 j p( I' I
- <head>6 }( { {+ k: g( y. _! q+ g
- <base href="<%=basePath%>"># O( c6 z4 X" `
- <title>My JSP 'ds04.jsp' starting page</title>% \1 A. t1 L6 t
- <span id="tiao">3</span>/ m2 }8 ~+ b3 g; [
- <a href="javascript:countDown"> </a>秒后自动跳转……
5 X" G0 {: R- B4 q; q4 P - <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>- c: h; U l: o1 a- d) k
- <!--脚本开始-->
5 K- i" {& ^! ^8 z - <script language="javascript" type="">5 j+ t' y6 P# V
- function countDown(secs){2 x, q8 M0 r/ f1 C G
- tiao.innerText=secs;5 S: k9 ~0 D# i0 s' B8 w
- if(--secs>0)% V# S: _( { o' `+ \, o# L
- setTimeout("countDown("+secs+")",1000);/ [0 V' x' E. ?! n$ u6 O# t
- }3 r) ]: b8 ?1 A& D4 G
- countDown(3);1 W3 \+ b. w: ]" W: Q
- </script>( R/ ^1 N1 E. ^4 F4 D% f0 L+ }
- <!--脚本结束-->
' D" ], N2 A' K - </head>
复制代码 例6:/ d5 a$ G2 S: w9 k& f( }
- <head>
5 c8 {* X% @% Z8 s - <meta http-equiv="refresh" content="2;url='b.html'">
: l" p7 i* u' ] - </head>
复制代码 例7:7 k2 z! @3 r3 A3 C: h
- <script language="javascript" type="text/javascript">
) b, R8 P" X3 s$ y" P - setTimeout("window.location.href='b.html'", 2000);
1 S/ J5 y M6 O& u- c5 G: e3 v - //下面两个都可以用
! K. a" F, e+ z$ K - //setTimeout("javascript:location.href='b.html'", 2000);4 U" C: V- V! g
- //setTimeout("window.location='b.html'", 2000);
, l5 \# _) {! x: y5 R. f- z - </script>
复制代码 例8:/ g, p4 O: d- J6 I0 g& R
- <span id="totalSecond">2</span>2 E* n+ M0 f1 |. m" E
- <script language="javascript" type="text/javascript">9 d% V" z# G4 \& v! {9 s0 a
- var second = document.getElementByIdx_x('totalSecond').innerHTML;
G3 q& z9 U; X6 ~0 W6 u/ A$ Z, T" ? - if(isNaN(second)){" m1 |6 g& f) K% J8 Q
- //……不是数字的处理方法
5 \4 v! `3 }: ? s' R* P - }else{' b! h* l& g- H: _6 z
- setInterval(function(){
/ E+ N0 |+ N- ` - document.getElementByIdx_x('totalSecond').innerHTML = --second;, p( A" f f0 h$ r6 y
- if (second <= 0) {# R3 z F, i; ~- t" q/ M1 H( h+ X
- window.location = 'b.html';$ I1 S& z f6 q Y% j. h
- }
+ V7 w0 `- g5 ^/ h - }, 1000);
* [+ l9 c3 J; I6 z- [ - }
3 X) I8 o D2 {2 w( B. N - </script>
复制代码 . |3 l" H9 a9 p+ H; @1 Z
; p5 k: o0 ^9 F3 L q i9 n/ K
4 W. i, J) d( [& D) L) v
|