制作彩灯

html主要代码：

<div id="button">
<input type="button" value="开始" id="start"/>
<input type="button" value="加速" id="upspeed" />
<input type="button" value="减速" id="lowspeed" />
<input type="button" value="停止" id="stop" />
</div>
<div id="one" class="wid">
</div>
<div id="two" class="wid">
</div>
<div id="three" class="wid">
</div>
<div id="four" class="wid">
</div>

css样式：

#button{
width:220px;
height:30px;
margin:0 auto;
}
input{
float:left;
margin-left:10px;
background:#FFF;
color:#000;
border:none;
}
.wid{
width:50px;
height:20px;
margin-top:20px;
margin-left:20px;
float:left;
}
#one{background:#909;}
#two{background:#3C3;}
#three{background:#63C;}
#four{background:#999;}

瞪大眼睛关注喽重点来了！！！

js代码：

<script language="javascript">
var imgs=["#909","#3C3","#63C","#999"];
var i=0;
var tt;
var flag=0;
function $(id){return document.getElementById(id);}
function stream(){
if(i%4==0){
$("one").style.background=imgs[0];
$("two").style.background=imgs[1];
$("three").style.background=imgs[2];
$("four").style.background=imgs[3];
}else if(i%4==1){
$("one").style.background=imgs[3];
$("two").style.background=imgs[0];
$("three").style.background=imgs[1];
$("four").style.background=imgs[2];
}else if(i%4==2){
$("one").style.background=imgs[2];
$("two").style.background=imgs[3];
$("three").style.background=imgs[0];
$("four").style.background=imgs[1];
}else{
$("one").style.background=imgs[1];
$("two").style.background=imgs[2];
$("three").style.background=imgs[3];
$("four").style.background=imgs[0];
};
i++;
}
function colors(){
$("start").style.background="white";
$("upspeed").style.background="white";
$("lowspeed").style.background="white";
$("stop").style.background="white";
}
function starts(){
stops();
flag=0;
colors();
$("start").style.background="yellow";
tt=setInterval("stream()",300);
}
function upspead(){
stops();
tt=setInterval("stream()",100);
colors();
$("upspeed").style.background="yellow";

}
function lowspead(){
stops();
colors();
tt=setInterval("stream()",800);
$("lowspeed").style.background="yellow";
}
function stops(){
clearInterval(tt);
colors();
$("stop").style.background="yellow";
}
$("start").onclick=starts;
$("upspeed").onclick=upspead;
$("lowspeed").onclick=lowspead;
$("stop").onclick=stops;

</script>