html部分：
<div class="box"> <ul id="ul"> </ul> <div class="box2"> <input type="button" value="开始"> <input type="button" value="暂停"> </div> </div>css部分：
.box{ width:500px; margin:0 auto; } .box ul li{ list-style: none; width:100px; height:50px; text-align: center; line-height: 50px; float: left; } .bgColor{ background: pink; } .box2 input{ width:80px; height:50px; line-height: 50px; }js部分
var names =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30], ul = document.getElementById("ul"), index = 0, len = names.length, btn1 = document.getElementsByTagName("input")[0], btn2 = document.getElementsByTagName("input")[1]; for(var i=0;i<len;i++){ ul.innerHTML += "<li>"+names[i]+"</li>"; } var lis = ul.getElementsByTagName("li"); // console.log(lis[0]); var id=null; function changeBtn(){ id = setInterval(function(){ for(var j=0;j<len;j++){ lis[j].className=""; } lis[index].className = "bgColor"; index++; if(index==len){ index=0; } },100); } //停止 btn2.onclick = function(){ clearInterval(id); } var k=0; //开始 btn1.onclick = function(){ if(k){ clearInterval(id); } changeBtn(); k++; }