<JavaScript> 七. 延时器 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 <script type="text/javascript">
 6 /*
 7     延时器 时间一到, 执行JS代码一次
 8 */
 9 
10 // ------------------ 方法 --------------------
11 /*
12     1. setTimeout(code, millisec)
13     code: JS代码, 一般是JS函数
14     millisec: 毫秒
15     返回一个延时器id变量
16 
17         (1). 以下两种写法是正确的, 都是传函数地址
18     window.setTimeout(init, 2000);
19     window.setTimeout("init()", 2000);
20 
21         (2). 这种写法是错误的, 传函数的执行结果
22     window.setTimeout(init(), 2000);
23 */
24 
25 // 实例1: 计数器
26 var i = 0;
27 var timeout;
28 
29 // 延时器开始
30 function startTimeout() {
31 
32     // 获取<input>元素
33     var inputObj = document.getElementById("result");
34 
35     // 更改信息
36     inputObj.value = "程序已经运行了" + i + "秒!"
37 
38     // 更改计数
39     i++;
40 
41     // 调用自己
42     timeout = window.setTimeout("startTimeout()", 1000);
43 }
44 
45 /*
46     2. clearTimeout(timer) 清除延时器id变量
47     window.clearTimeout(timer);
48 */
49 
50 // 延时器结束
51 function stopTimeout() {
52 
53     // 信息更新信息
54     window.clearTimeout(timeout);
55 }
56 
57 </script>
58 </head>
59 <body>
60 
61 <!-- 延时器 -->
62 <input id="result" type="button" value="程序已经运行了0秒!" /><br />
63 <input type="button" value="开始" onclick="startTimeout()">
64 <input type="button" value="停止延时器" onclick="stopTimeout()"><br />
65 
66 </body>
67 </html>

 

posted @ 2017-02-04 22:24  云淡风轻我爱编程  阅读(428)  评论(0)    收藏  举报