1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #main { 8 width: 608px; 9 border: solid 1px red; 10 margin: auto; 11 } 12 13 #main .block { 14 width: 100px; 15 height: 100px; 16 line-height: 100px; 17 text-align: center; 18 border: solid 1px blue; 19 margin: 5px 25px; 20 float: left; 21 } 22 23 .blue { 24 width: 100px; 25 height: 100px; 26 line-height: 100px; 27 text-align: center; 28 border: solid 1px blue; 29 background-color: blue; 30 margin: 5px 25px; 31 color: white; 32 float: left; 33 } 34 35 </style> 36 <script type="text/javascript" src="../../js/system.js"></script> 37 </head> 38 <body> 39 <div id="main"> 40 <div class="block" id="a1">a</div> 41 <div class="block" id="a2">b</div> 42 <div class="block" id="a3">c</div> 43 <div class="block" id="a4">d</div> 44 <div class="block" id="a8">e</div> 45 <div class="block" id="a7">f</div> 46 <div class="block" id="a6">g</div> 47 <div class="block" id="a5">h</div> 48 <div style="clear: both"></div> 49 </div> 50 <input type="button" id="btnStop" value="停止"> 51 <input type="button" id="btnBegin" value="开始"> 52 <script type="text/javascript"> 53 var index = 0; 54 var bojGame = null; 55 $$("btnBegin").onclick = function () { 56 clearInterval(bojGame); 57 bojGame = setInterval(function () { //按照指定的周期来调用好函数或表达式，以毫秒计算1000毫秒=1秒，，循环的 58 for (var i = 1; i <= 8; i++) { 59 var n = "a" + i; 60 comm.setAttr($$(n), "class", "block"); 61 } 62 index++; 63 var n = "a" + index; 64 comm.setAttr($$(n), "class", "blue"); 65 if (index >= 8) { 66 index = 0; 67 } 68 }, 100) 69 } 70 71 $$("btnStop").onclick = function () { 72 clearInterval(bojGame); //退出循环 73 } 74 </script> 75 </body> 76 </html>