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>