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>
