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>