<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#main {
width: 608px;
border: solid 1px red;
margin: auto;
}
#main .block {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px blue;
margin: 5px 25px;
float: left;
}
.blue {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px blue;
background-color: blue;
margin: 5px 25px;
color: white;
float: left;
}
</style>
<script type="text/javascript" src="../../js/system.js"></script>
</head>
<body>
<div id="main">
<div class="block" id="a1">a</div>
<div class="block" id="a2">b</div>
<div class="block" id="a3">c</div>
<div class="block" id="a4">d</div>
<div class="block" id="a8">e</div>
<div class="block" id="a7">f</div>
<div class="block" id="a6">g</div>
<div class="block" id="a5">h</div>
<div style="clear: both"></div>
</div>
<input type="button" id="btnStop" value="停止">
<input type="button" id="btnBegin" value="开始">
<script type="text/javascript">
var index = 0;
var bojGame = null;
$$("btnBegin").onclick = function () {
clearInterval(bojGame);
bojGame = setInterval(function () { //按照指定的周期来调用好函数或表达式，以毫秒计算1000毫秒=1秒，，循环的
for (var i = 1; i <= 8; i++) {
var n = "a" + i;
comm.setAttr($$(n), "class", "block");
}
index++;
var n = "a" + index;
comm.setAttr($$(n), "class", "blue");
if (index >= 8) {
index = 0;
}
}, 100)
}
$$("btnStop").onclick = function () {
clearInterval(bojGame); //退出循环
}
</script>
</body>
</html>