cncml手绘网
标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin 时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1,只执行一次的定时器
" m! `# f: I7 h, b- <script>
# W, r6 M7 R( x9 r& t - //定时器 异步运行
& J: r& D' k2 v" k; C4 o - function hello(){
2 ^ s. w, l6 Z1 B - alert("hello");
$ P, w2 Q9 `2 o) e - } * N) q) u8 V. e4 b/ D1 h" b
- //使用方法名字执行方法
3 D; Q! a: S$ Y7 c# m - var t1 = window.setTimeout(hello,1000); ; ?6 {5 m% a$ [# N3 v8 G3 z/ B2 Y
- var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 % S% y: l9 r- _- F# {4 o
- window.clearTimeout(t1);//去掉定时器
6 n0 C' F% d4 f9 d2 Z - </script>
复制代码 2,重复执行的定时器
+ K8 E1 e# q) P o6 a- <script>
% N+ m1 {6 w9 R! c& e) M2 R1 d - function hello(){
. v& o3 o: r! u - alert("hello"); 1 ]. v$ d3 e# C- t8 T! R
- }
- A4 D5 C+ x; b) M - //重复执行某个方法 0 M( [0 `: ]3 g
- var t1 = window.setInterval(hello,1000);
, Z" ^( O/ t- a1 g# L: a0 e - var t2 = window.setInterval("hello()",3000);
g+ {2 v7 U4 U$ C, _. _ - //去掉定时器的方法
6 m0 ?6 v; Y G7 q& [9 j) J- Z8 h5 q - window.clearInterval(t1); 8 H c/ N& I3 p
- </script>
复制代码 备注: 7 v" p0 {3 p$ K9 z) W0 b4 l
p- n! ]$ u: ]- w- \% ^- \/ H- n
如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
4 l }. X1 M: M' A" n可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。
2 a9 T+ l0 J9 v o9 w0 I- F C! i: T- _% f) k9 X( M
在javascritp中,有两个关于定时器的专用函数,分别为:
1.倒计定时器:timename=setTimeout("function();",delaytime);2 v, U, V) ^! C! B, p8 b
2.循环定时器:timename=setInterval("function();",delaytime);
第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成% l% F( l' q# G
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。5 u$ n1 b% p7 {7 ?& Q+ v1 u
倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
6 e* f8 q' H% u+ f/ a6 B比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
' L: N( J/ f3 A. H4 L. B! s' t则需要用到循环定时器“setInterval("function();",delaytime)” 。
获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。+ ?( d9 o( `) ^7 E$ Z" O
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。
定时器:
用以指定在一段特定的时间后执行某段程序。
JS中定时执行,setTimeout和setInterval的区别,以及l解除方法
setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
$ l% \7 S* r% h) u% }1 EsetTimeout("function",time) 设置一个超时对象
setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.' k! a& P" ?2 |
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复,setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
" k- n5 d: v% U# l+ m! |# r9 }clearInterval(对象) 清除已设置的setInterval对象
略举两例。
4 U; o" N9 h% \' ?2 s7 a例1.表单触发或加载时,逐字输出字符串
( `7 u" M4 N. T+ q- O- <html>
Z7 Z! L# V3 S+ W G7 t - <head>
6 m7 C4 G, F, q ]* L& I/ l - <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) }8 g% g. f9 s
- <title>无标题文档</title>
+ M1 q3 E% o& c( P7 o0 J - <script language="JavaScript" type="text/javascript">" F; a, n* b4 ?, D, F e) K
- var str = "这个是测试用的范例文字";$ q6 K( }4 A4 u
- var seq = 0;4 d# q5 W! `7 l
- var second=1000; //间隔时间1秒钟) ]& [9 M: w' _) g4 l6 I
- function scroll() {
2 l( y- z3 C+ |+ p - msg = str.substring(0, seq+1);
) I4 o. y; u) @' ^ - document.getElementByIdx_x_x('word').innerHTML = msg;
4 Q# I. J8 J5 A) P' s9 @$ [ - seq++;; Q- X: @4 B. V7 k3 V. i/ O
- if (seq >= str.length) seq = 0;
/ _5 S5 R# w; g2 [4 T H0 p - }
. N4 g5 ?+ ^8 a - </script>
( I+ R# M6 F5 H0 U! l* }& p - </head> H5 [- y! W' [/ K+ ^
- <body onload="setInterval('scroll()',second)">
3 ^9 j0 N: N3 e9 A1 ?+ P8 k/ l - <div id="word"></div><br/><br/>
' [9 O6 T4 k+ r, n( i - </body>1 F, F* @1 z4 p2 d( l9 p% C
- </html>
复制代码 例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
( h) M/ h' n/ a$ c9 b2 c. W8 S3 f- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6 u$ ?; y9 P6 g) O6 E - <html xmlns="http://www.w3.org/1999/xhtml">
; n; B& t" E0 _& }4 h! V4 e) a% E: S5 f - <head> r9 ~2 y+ l8 ^( J; q
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 q" Q* L. C, e* Z - <title>无标题文档</title>$ ~. X" `+ A$ H: J" I/ T
- <script language="JavaScript" type="text/javascript">6 `9 ]# s0 g: i7 x
- var second=5000; //间隔时间5秒钟7 m/ B5 @2 Y, a7 m
- var c=0;0 d. P( G8 X1 \
- function scroll() {, _# J: z/ X$ h+ n
- c++;8 N2 W F$ m' O2 D, M0 S8 F
- if ("b" == document.activeElement.id) {
. m3 s4 o, k2 X8 X2 P - var str="定时检查第<b> "+c+" </b>次<br/>";% E) _! c* i- H4 N3 l" s" v4 Q1 W: {
- if(document.getElementByIdx_x_x('b').value!=""){
- H5 N3 O7 l0 {$ ], P9 u - str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";7 l4 f; Z0 }6 {- b4 x8 A9 X
- }
5 q9 A" h: ~) A8 Y - document.getElementByIdx_x_x('word').innerHTML = str;! h' V" s* r; d# Q+ ?
- }
7 ~/ o# B$ N, j' @: ] - }
- B* G- Q* W' I - </script>/ g9 V x' T$ _0 C. p
- </head>
5 i% x: V& j9 l3 } - <body>3 F: F) Z6 Q3 d2 l
- <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
; I* Z6 G1 k4 u. Z5 x, o - <div id="word"></div><br/><br/>* v& a( m% f* [+ K1 d
- </body>
3 Y5 X, a) ?2 A - </html>
复制代码 例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
# @- y" H4 ]% l9 c7 [2 c6 ?- m. Y- <html xmlns="http://www.w3.org/1999/xhtml">
0 J6 p: H0 m. Q8 i: J$ l1 H2 Y7 E - <head>) Z) e9 w0 ^5 i$ u1 \9 y8 o
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, B+ a% t4 O m5 F
- <script language="javascript">
; J3 Z% k2 M( c4 e" \ - function count() {
0 G! P" W- P! a' L; [1 `) _ - document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";
9 ]3 j, A4 S2 {+ W+ T - setTimeout("alert('十秒钟到!')",10000), b9 `1 Y. e% J. z0 Q$ g1 V
- }
% l, r7 m( g, Z( Y4 B0 ~ - </script>. X! a& k1 I8 Q
- <body>% V. w4 Q e9 |$ ~0 l$ Y
- <div id="m"></div>
& x0 s1 W3 l W" t8 `$ T) B4 Y- x - <input TYPE="button" value=" 计时开始" onclick="count()">0 N) E- l# K( H) X; D2 p6 g+ }
- </body>
& A+ l! `2 w- g x7 f - </html>
复制代码 例4:倒计时定时跳转) U. Z1 g! ~& }7 @2 t
- <html>* R2 T2 Z9 O4 G7 N; H
- <head>
: W/ S; j& V2 z7 J* ~ - <base href="<%=basePath%>">
* ?/ b% n Y0 F" s - <title>My JSP 'ds04.jsp' starting page</title>8 Y0 R) w6 o+ T
- <span id="tiao">3</span>
9 [* q# u6 c( ^$ D - <a href="javascript:countDown"> </a>秒后自动跳转……+ W0 ?; A+ O$ X3 F- C' J& h
- <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ ]! F; J# Q7 p
- <!--脚本开始-->
8 F1 r, y9 @" b( E8 I - <script language="javascript" type="">
9 U! I' e: J! m4 j - function countDown(secs){# K, z: m2 i+ c7 B. ]3 ?8 k
- tiao.innerText=secs;
6 _- X& ?. v! p' c; b/ s$ H - if(--secs>0)& F; @8 _' V( U
- setTimeout("countDown("+secs+")",1000);8 o1 c" v. G7 ^! y3 o$ \
- }
( F" \; m2 b4 C+ \ - countDown(3);
3 L- H. [3 }' n Y9 T; p - </script>
$ v5 \/ q& m4 |1 Q - <!--脚本结束-->3 I2 ~# o7 E* N' H8 @
- </head>
复制代码 例6:% b# [7 x9 x _4 p9 g
- <head> 0 C) }6 d6 J0 g# Z
- <meta http-equiv="refresh" content="2;url='b.html'">
6 U) W8 w% c5 V2 a - </head>
复制代码 例7:
7 K G) J$ r" l# \4 u4 Q- <script language="javascript" type="text/javascript">& \3 d! C- v: C2 K- s1 s
- setTimeout("window.location.href='b.html'", 2000);
3 _- ?; z( Z0 D+ N - //下面两个都可以用+ {- U3 Z8 x; Q+ S. K
- //setTimeout("javascript:location.href='b.html'", 2000);7 n* _; y& `, _" t
- //setTimeout("window.location='b.html'", 2000);' S6 _2 S2 G5 R& z
- </script>
复制代码 例8:
% F5 w# F4 X) k+ `# ^* E- <span id="totalSecond">2</span>
- S! n! u+ l: o9 \1 G - <script language="javascript" type="text/javascript">
# ?+ F# p. f; {$ e0 J0 i - var second = document.getElementByIdx_x('totalSecond').innerHTML;
& S0 u2 T4 A9 Q) B* p7 y/ b. X* L9 r - if(isNaN(second)){# e T* v2 f7 V2 v" h
- //……不是数字的处理方法
. H( ]6 i9 d3 w9 Q# Z9 f - }else{
' x; [0 P! @: V; N) Y6 Q7 y - setInterval(function(){9 Q6 g+ y/ z4 K$ a; `; r
- document.getElementByIdx_x('totalSecond').innerHTML = --second;& _4 o! Z+ a% H$ D Q
- if (second <= 0) {0 b: O- p( z' q. h& w
- window.location = 'b.html';, `% ~) ?' X3 p( }! q5 w7 w5 }7 N
- } S1 A) n6 N% S+ R% r
- }, 1000);& y- Y D$ }9 G: u4 V2 [2 n2 _, n
- }
+ b- ?- \7 R5 v, r _ - </script>
复制代码
9 b1 y7 [" i4 Y' e( M- C5 h
1 e" Z9 V% H2 D0 m5 L' |5 B5 z0 t" [ Q: v& ^! I
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |