1,只执行一次的定时器
+ k" w- A! L, j' R* n. q) U5 r& x- <script> 8 W: H" h4 d& C: }: k
- //定时器 异步运行 0 U0 e& @+ m$ B! W4 W% s! J- J+ t
- function hello(){
( d% e$ H$ a X6 [1 a! i - alert("hello"); 5 N7 {3 _! {2 D, [: ~+ a
- }
1 m2 w- I/ @% V- Q W( d4 C - //使用方法名字执行方法 " R4 d) l3 g% {2 G3 M Y! b2 |
- var t1 = window.setTimeout(hello,1000); 6 h/ [7 k* m' h$ x1 z& Q9 C
- var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 0 q1 C6 z' Y! T1 |3 @
- window.clearTimeout(t1);//去掉定时器
6 O1 ]% z5 j2 x - </script>
复制代码 2,重复执行的定时器 4 p9 h! q) c' }% o! C
- <script> 9 J9 ~& t( Y$ A% W9 s
- function hello(){
0 S2 x' [3 ~+ K7 s7 J - alert("hello"); 1 [, A; |) O. x, _5 a. R/ E
- }
7 s# R+ o6 I# p7 Z. q$ i5 `% H - //重复执行某个方法
/ A# x& A2 A% x s7 u - var t1 = window.setInterval(hello,1000);
/ p# R' b) S5 v* d! ^# n - var t2 = window.setInterval("hello()",3000); 1 Q3 n h6 f& |: `1 l6 a1 f7 l
- //去掉定时器的方法
2 x( \0 i. }) Q' k4 D( E - window.clearInterval(t1);
+ I+ l& \" i& C1 r - </script>
复制代码 备注:
# ~# H. z& r' a6 Y. t# `1 C
1 |3 L: U S' }% @6 c [如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
/ J' O. M* b6 b' ~可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。: w$ T2 W1 _; H5 v* H
( F( f5 Z4 G# m$ A在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);
0 j8 g0 `; C+ s3 {. F4 S. C: j$ N2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成$ A6 f' N$ `" Y
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。" b' p. k/ [7 r* l, r3 ]
倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。1 k& D0 b. ^& h* W2 @
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现, @! w- D2 o- M% [
则需要用到循环定时器“setInterval("function();",delaytime)” 。 获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
' T9 X+ S* n5 d; P b7 |2 x' B比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。 定时器: 用以指定在一段特定的时间后执行某段程序。 JS中定时执行,setTimeout和setInterval的区别,以及l解除方法 setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
0 I; t. J1 |3 _/ b& I; UsetTimeout("function",time) 设置一个超时对象 setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
: C$ ~ W0 ]2 s7 VsetInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复。 clearTimeout(对象) 清除已设置的setTimeout对象$ [ z8 X( ]# W, X4 r
clearInterval(对象) 清除已设置的setInterval对象 略举两例。
- H0 E8 A( S) a4 B9 Z& S/ H3 f例1.表单触发或加载时,逐字输出字符串 ' S9 {7 B2 W( q# [" ?
- <html>% b8 ]# E+ y6 X) V& V2 s/ c
- <head>
* i% z. S9 u5 w- W - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />8 J- D$ @; B! ` g @
- <title>无标题文档</title>
$ H( B( M1 i4 j0 Z7 R" ?5 [1 | - <script language="JavaScript" type="text/javascript">/ y2 z% j2 k. o; M
- var str = "这个是测试用的范例文字"; M# S! ^# Z8 Q8 Z
- var seq = 0;9 F! |4 Q7 H# k
- var second=1000; //间隔时间1秒钟) o0 c& r! [9 c4 g# h w" f
- function scroll() {
y6 Y4 x4 t9 h" y8 y T { - msg = str.substring(0, seq+1);
, R* S) k: v4 d( M2 m+ f - document.getElementByIdx_x_x('word').innerHTML = msg;
2 t1 [ _$ f& G% e! g2 J4 C. ^; ^0 K7 A - seq++;# N. [# ~2 ^9 y7 K3 u( \5 ^$ Y$ S$ _' k
- if (seq >= str.length) seq = 0;
7 V! I* [+ R6 Q, k - }
1 q) f! ]" d8 A @: {7 g- P - </script>
: Q* @1 ?! G* k: G! _ - </head>
# Y4 s( j# {; K- T - <body onload="setInterval('scroll()',second)">% W8 z5 M* p- f/ A; Y! M% k
- <div id="word"></div><br/><br/>! Y- Z8 k! Y* G/ d5 D
- </body>
) v+ \% o; Q C4 k' N; j* T r - </html>
复制代码 例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。- S0 J& ^( i; I/ f7 Y/ m9 i4 c
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; @4 q4 \0 ~2 v* y3 w8 R
- <html xmlns="http://www.w3.org/1999/xhtml">
1 {% \* m# G( Y: A& p - <head>
& X( f1 y/ Q7 p& W8 e" c$ S - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
( T4 G, Y, S8 `/ F - <title>无标题文档</title>
2 ^1 P+ e# C. @' A. ]6 _0 q& F1 X - <script language="JavaScript" type="text/javascript">
3 g6 Y" Q8 P: W( X - var second=5000; //间隔时间5秒钟5 V4 q+ C6 L: a, r2 o; T; t3 |
- var c=0;
" b2 Z* `* w# b: P9 {- r" g$ M - function scroll() {! ]( o/ K: J6 s5 t- s1 s' ^' q
- c++;
: a6 Y! M" _. z0 O - if ("b" == document.activeElement.id) {2 c R, k! Y: |1 S: ^; [% }
- var str="定时检查第<b> "+c+" </b>次<br/>";# g' ?& v! A, V0 R6 x1 @# D
- if(document.getElementByIdx_x_x('b').value!=""){
: O; y# h% ?: p/ U - str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
" g: ~+ k4 w# d2 c0 V9 r - }! p% i8 ]$ H5 F! Z
- document.getElementByIdx_x_x('word').innerHTML = str;
) ^. S0 x4 d- p/ u1 q* A - }
: K8 b: `$ Z* V* l+ n' | - }
6 U) {- u o: o6 |$ j' f) ?8 x" I - </script>
0 w, k8 n" |9 u& y* x. i - </head># f8 X' u Z9 P) L1 ^
- <body>
& M" i* J, u$ D1 Z5 h - <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>& [) s& a9 D6 O2 a
- <div id="word"></div><br/><br/>1 l! {; m! A, [9 ?
- </body>2 O# e3 y. C6 ~# W% p9 v& G
- </html>
复制代码 例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
# N' v$ Q( d3 f9 c- <html xmlns="http://www.w3.org/1999/xhtml">3 D) S& r9 K' ~3 c @
- <head>
9 }: `6 S% V) X - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
, P& C9 a y# ]- c - <script language="javascript">
( R, I! O. s. p. r; X1 N' ?9 K - function count() {% m7 o, |% J% q4 R" F' w
- document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";) _4 a) a' T1 I* b: r
- setTimeout("alert('十秒钟到!')",10000)* @0 f% i7 L/ j7 l9 Y6 @" _
- }
# i# l5 r1 F/ d0 ^* f! B+ N - </script>+ `& O+ _' f1 H& g/ C5 r
- <body> Z- p# L' m2 s
- <div id="m"></div>' x& t f9 P- _& {
- <input TYPE="button" value=" 计时开始" onclick="count()">+ H* i4 U* f3 @0 M
- </body>
$ s$ o! I0 n) ` - </html>
复制代码 例4:倒计时定时跳转# G4 B' ]: y+ x
- <html>
" U5 p( j' R3 e4 D9 } - <head>5 r5 i6 _4 h. G) v# R
- <base href="<%=basePath%>">( f+ x: o+ |1 X z$ W" g* z
- <title>My JSP 'ds04.jsp' starting page</title>
! {! y, j8 b: H8 f3 C - <span id="tiao">3</span>/ Q+ B9 X0 z* n
- <a href="javascript:countDown"> </a>秒后自动跳转……4 W1 j' j/ D4 z J/ c& k
- <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ P4 q/ B4 O# i) Y a3 P( `
- <!--脚本开始--> i1 ` H8 O8 p) ]; n
- <script language="javascript" type="">9 |2 i1 \) d% N( [
- function countDown(secs){8 ~0 S- X' U; ]( F1 X
- tiao.innerText=secs;
1 Q/ G5 O4 s1 }- ~; h) p - if(--secs>0)
& O5 W( u/ n; }& I- o) p8 ? - setTimeout("countDown("+secs+")",1000);' N/ B' N; H2 I2 R7 }5 l" }
- }
' {- o- s. ^8 p) g+ S - countDown(3);/ a3 i" g. K6 s' D" A
- </script>/ y( o, _$ b+ U* O* [8 y- s" B
- <!--脚本结束-->- j. S5 n) A% Z
- </head>
复制代码 例6:# S* j) g' \" w7 G2 [4 T! O
- <head>
% M. \4 o( H9 {& G, t1 N - <meta http-equiv="refresh" content="2;url='b.html'"> ( S% q" t5 c* G1 L+ p& P9 b0 C
- </head>
复制代码 例7:
5 ?1 |7 y, s( I. d- ~9 V. o T- <script language="javascript" type="text/javascript">) {1 F, n( P' q
- setTimeout("window.location.href='b.html'", 2000);! [/ |1 M& h z* N, y1 W
- //下面两个都可以用4 }5 g& b% U g3 {
- //setTimeout("javascript:location.href='b.html'", 2000);4 x" I, E8 u: y' d3 [
- //setTimeout("window.location='b.html'", 2000);6 X' K4 U# M# Z; k$ C2 }& p
- </script>
复制代码 例8:1 O+ e2 h. ~* g: H
- <span id="totalSecond">2</span>3 }% b7 }+ t, M* i# i
- <script language="javascript" type="text/javascript">
: S( L( N _+ r - var second = document.getElementByIdx_x('totalSecond').innerHTML;( J/ ?" P) ~% p1 ^! [" T: ^- e
- if(isNaN(second)){
6 U% A# m# B% ?& `; b - //……不是数字的处理方法) P- u- T% c, O9 S+ S$ d' s Y& w
- }else{; F' _1 b* n/ `% f! S W) w
- setInterval(function(){
u* g0 J5 [, [0 f, j3 |, u - document.getElementByIdx_x('totalSecond').innerHTML = --second;8 l+ B2 A3 a% A2 ~/ L
- if (second <= 0) {" s$ ?. R" A* @5 V
- window.location = 'b.html';
, m7 B1 o0 }* P - }0 m5 n- C; q/ ?6 x
- }, 1000);9 C& a& U! r) J
- } 7 \* E$ j/ ~* h
- </script>
复制代码
. {7 [) W& a7 B0 k, e5 B' e( \* |3 j
3 R9 _$ F# q( z2 X0 c8 _5 q
|