1,只执行一次的定时器 w1 G% b! x0 [$ S
- <script>
2 f8 c6 [; j a: S+ N$ u - //定时器 异步运行
" G) W, L" R$ P5 M3 H6 u4 {9 e. N - function hello(){
) c9 W2 c0 {+ u - alert("hello"); - F# y) _, h0 q4 K; d q1 m$ m
- }
% W1 _& L# }+ X0 d, P - //使用方法名字执行方法
( f& `% e+ y5 ^6 j, |% W- I) U - var t1 = window.setTimeout(hello,1000); 1 | u* h! Q$ s
- var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 5 d* k5 V' {! s2 Q( `8 T9 |
- window.clearTimeout(t1);//去掉定时器
( P- F$ }: T7 u" K ~. r - </script>
复制代码 2,重复执行的定时器 ' w/ z) U- `- s# {
- <script>
9 ~, m M' ~" E1 d - function hello(){
# c2 _6 y& B8 L& K" U7 ] - alert("hello");
% Q% F, `& e! I8 @( I" n - }
* M/ H" O' s* E9 U - //重复执行某个方法
% ]5 s* U+ _) B- `$ i - var t1 = window.setInterval(hello,1000);
" F5 M4 M. F3 ?/ H, I - var t2 = window.setInterval("hello()",3000); # {( o7 \4 o' _' x2 B/ N" v
- //去掉定时器的方法 , W: W) U' t4 I
- window.clearInterval(t1);
6 L1 q8 |/ p! g+ M - </script>
复制代码 备注: ( q) n" F* c' [# E7 v# P
' `2 j S$ X& ]! K1 z. c; s
如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
7 C9 Z# }( X& i, h' y2 x U可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。! c2 p% O& O* a6 u. N7 H7 o2 R
$ a: h" }; Y4 q/ R
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);
r% n- {6 W7 {# |7 a2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
7 K( y2 {7 W" Y% j* e9 G“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。0 p, X: i0 L! T1 {5 E( ~
倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
/ f& q' g1 J0 O/ V5 R5 [比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,8 \) G9 F' q0 R' q
则需要用到循环定时器“setInterval("function();",delaytime)” 。 获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
0 T% W5 p, D1 W! ^4 o3 d比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。 定时器: 用以指定在一段特定的时间后执行某段程序。 JS中定时执行,setTimeout和setInterval的区别,以及l解除方法 setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
- ?* ?9 M% f. R( z" r4 q& \3 j) fsetTimeout("function",time) 设置一个超时对象 setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
8 y! x8 t' C# dsetInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复。 clearTimeout(对象) 清除已设置的setTimeout对象# a$ L$ n5 L/ \. B! i! ?
clearInterval(对象) 清除已设置的setInterval对象 略举两例。
- R! |- H+ ?2 j7 F( d2 V例1.表单触发或加载时,逐字输出字符串 8 t& R3 F+ O+ i2 s
- <html>% A: b4 ~+ `8 c8 b) i2 f+ Y( b4 `$ b5 g
- <head>
+ }4 j( o. G9 o8 B. D; t6 w - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
# u- T5 v! r% g, l( N5 \& O - <title>无标题文档</title>
8 A' G6 O9 _! o- s" b- I; @ - <script language="JavaScript" type="text/javascript">
, f8 g1 i/ T8 G2 f( G - var str = "这个是测试用的范例文字";
, s {3 h! _2 i9 Y3 s& N7 p/ Y - var seq = 0;5 u7 w7 {* F+ F" ?( b' i& D. m
- var second=1000; //间隔时间1秒钟
, P! d: k( b) T" R - function scroll() {
d1 s$ k; W7 p5 a) k1 L - msg = str.substring(0, seq+1);2 A! U+ g P0 D8 {2 T* R* z
- document.getElementByIdx_x_x('word').innerHTML = msg;% |. ^% {- s5 w0 c0 ^
- seq++;
2 R# Q# s8 ~% ?4 Y/ l - if (seq >= str.length) seq = 0;
) s! y8 }9 L) D% L% t - }
( h7 _& `8 u2 q7 H0 p; @8 k - </script>8 `' i4 x% j2 B* x! W
- </head>4 e! `- P' N/ ] H6 R9 {
- <body onload="setInterval('scroll()',second)">) O5 U9 S$ T9 U5 ?+ W' E& H
- <div id="word"></div><br/><br/> B% Q, d- Z. c- ?# N; i
- </body>
# Q0 k, z I. ^6 C - </html>
复制代码 例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。8 ?; Z1 `2 f: a3 b! i
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 M$ x p% }6 D; ^- A5 o - <html xmlns="http://www.w3.org/1999/xhtml">
7 ?, l3 J9 n1 Y. U% D$ U - <head>) D3 t6 B. V5 L, w
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) f6 w; ~: [1 v; U* Y
- <title>无标题文档</title>0 W5 m; C/ w5 X$ L
- <script language="JavaScript" type="text/javascript">% D- _! w8 {+ a V
- var second=5000; //间隔时间5秒钟8 k) T, _9 t( k E5 I
- var c=0;+ z! s0 I- Q! G6 C; @, g
- function scroll() {6 A! `2 V: `2 b8 [; V
- c++;% E S5 p5 O/ \9 D1 D$ ~. p
- if ("b" == document.activeElement.id) {0 b1 P$ Y, X8 l) T0 ^, C! D; @9 r
- var str="定时检查第<b> "+c+" </b>次<br/>";% z7 P$ Q6 X" W* w+ R6 [
- if(document.getElementByIdx_x_x('b').value!=""){# |0 q( h; Z! \8 ^
- str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
( O, e+ Y# l' ]2 U - }0 e( L$ a/ ~$ C! L! J0 d
- document.getElementByIdx_x_x('word').innerHTML = str;
I6 x5 v$ E7 I2 F) Y0 S - }: J; b0 X$ D. s. ?0 _& F" u8 p
- }
! a! K* K5 s. u n) ] - </script>
; j o3 C) R( F6 F: | - </head>) d1 M; l, H- O( C* R
- <body>) L- @- B& D9 h5 y5 i: W2 s
- <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>/ @: K8 r/ ]& r2 S: C! s0 E
- <div id="word"></div><br/><br/>
5 y0 q. {( X; P - </body>7 M) u3 O" T# D9 @( T4 A" B; {9 J
- </html>
复制代码 例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。$ B' C3 [ F. r' e% E1 C- N
- <html xmlns="http://www.w3.org/1999/xhtml">
- m' m3 S6 |4 m$ I I3 w! r - <head>
' I. f) E5 G! E$ L, y# s - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />- F: K t% P9 O8 a7 D4 m- G- ?
- <script language="javascript">
* F0 c; l5 b/ k4 N9 k, X4 z - function count() {
: y# S2 K, q5 x6 e - document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";
3 _. _ o! X0 w6 ?. A - setTimeout("alert('十秒钟到!')",10000)
5 o- E6 [- u$ e, u( Z - }
% K5 c& d$ f" y* U; ~ s - </script>
2 T3 M5 v. @$ q2 l; a h2 O - <body>8 U) [" X6 T/ m& ?8 Y9 A1 B( ]0 A
- <div id="m"></div>; `3 m+ R+ `- b& g* L
- <input TYPE="button" value=" 计时开始" onclick="count()">
1 T9 \. t3 q% B1 p5 d0 \ - </body>
; c. P. Q( u$ U, Z1 } - </html>
复制代码 例4:倒计时定时跳转
0 e6 W( W. S; g, G( N2 d6 i- <html>
! _- `5 Z+ I: G7 }2 @6 d - <head>6 K7 w6 T* X6 ^8 d( b
- <base href="<%=basePath%>">: L5 j6 P9 _$ `2 x: K' c; s
- <title>My JSP 'ds04.jsp' starting page</title>0 P% ~6 J* U& Q
- <span id="tiao">3</span>
" g* ]- }9 g; ]% \! L - <a href="javascript:countDown"> </a>秒后自动跳转……
7 N& r; d) K5 R( `6 o7 @7 B - <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
. U: _6 H3 c6 a8 H# F) m# _ - <!--脚本开始-->3 a8 i& U1 }3 z. P( ?
- <script language="javascript" type="">9 q" _. b7 a8 J a, T. _: R' F7 V! ~
- function countDown(secs){. N. a% E! e9 ?' \1 B; b
- tiao.innerText=secs;9 P% Q' F! C: @ h% a
- if(--secs>0)- L0 l+ A; D3 Z, J3 p# E- Q, C
- setTimeout("countDown("+secs+")",1000);# Y4 |$ M/ K7 w7 E! l
- }' u7 |" L: l$ S, z
- countDown(3);
8 R, u: g$ [) r2 H# L7 y - </script># N! w' {: d6 z2 F d! ?- I
- <!--脚本结束--># L) ? ?' g" ~, T
- </head>
复制代码 例6:0 Z! E1 s9 y4 m. _
- <head> $ U1 F3 p L" `2 h; \" W8 \
- <meta http-equiv="refresh" content="2;url='b.html'"> 2 y: |0 U. R; c/ l- P0 Y
- </head>
复制代码 例7:- H. R+ p7 O3 i: |/ |+ G& h! ^$ n
- <script language="javascript" type="text/javascript">
9 ^5 R2 v$ i. n- V2 R. K2 A - setTimeout("window.location.href='b.html'", 2000);0 O+ l: p, @4 i( G! p. |
- //下面两个都可以用$ d# G, B+ w8 I# a7 W/ S" B3 s
- //setTimeout("javascript:location.href='b.html'", 2000);" D# o' I- J6 ]7 h; U& i6 D7 N& F
- //setTimeout("window.location='b.html'", 2000);
4 I9 ?# V1 ?5 w) u) G, s) _ - </script>
复制代码 例8:
% Q$ t( D1 z, y, R) |. P* t- <span id="totalSecond">2</span>7 x# @* [% I4 V. Y
- <script language="javascript" type="text/javascript">* j( g+ b& V, W3 L3 S |+ s* {
- var second = document.getElementByIdx_x('totalSecond').innerHTML;* C1 A; ]& T5 U, y
- if(isNaN(second)){
t; y9 q W5 E7 \% o0 x - //……不是数字的处理方法7 w" g+ `- [4 k
- }else{
. w0 n1 @! ~7 j0 M - setInterval(function(){0 X9 [3 G4 X$ N, l# c' C: M
- document.getElementByIdx_x('totalSecond').innerHTML = --second;
1 H' x5 X: U8 t! q - if (second <= 0) {* D' v ~5 o4 n8 h( K8 u# E
- window.location = 'b.html';
- F' T7 ^; G' F - }+ T6 m3 z0 Y3 k5 d2 y" y) ]
- }, 1000);: {1 ?2 l1 m7 V
- } 2 [8 i1 n1 s, H( w. ^( j0 b
- </script>
复制代码 ( K: p# q. E3 X1 @2 _
# p0 c) d" s; C: x! }
2 J% K: r6 [8 G) g
|