<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. setInterval(code, millisec)
13     code: JS代码, 一般是JS函数
14     millisec: 毫秒
15     返回一个定时器id变量
16 */
17 // 实例1: 自动切换图片
18 var arr = ["001.jpg", "002.jpg", "003.png"];
19 var j = 0;
20 var interval;
21 
22 function startInterval() {
23 
24     // 每隔1s, 调用一次startInterval()
25     interval = window.setInterval("changeImg()", 1000);
26 }
27 
28 // 定时器开始
29 function changeImg() {
30 
31     // 获取<img>元素对象
32     var imgObj = document.getElementById("image");
33 
34     // 更改元素对象信息
35     imgObj.src = "images/" + arr[j%3] 
36 
37     j++;
38     if (j > 2) {
39         j = 0;
40     }
41 }
42 /*
43     2. clearInterval(timer) 清除定时器id变量
44     window.clearInterval(timer);
45 */
46 // 定时器结束
47 function stopInterval() {
48     window.clearInterval(interval);
49 }
50 
51 </script>
52 </head>
53 <body>
54 
55 <!-- 定时器 -->
56 <input type="button" value="开始定时器" onclick="startInterval()">
57 <input type="button" value="停止定时器" onclick="stopInterval()"><br />
58 <img id = "image" src="images/001.jpg" />
59 
60 </body>
61 </html>

 

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