console
<!DOCTYOE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{width:100px;height:50px;border:1px dashed silver;}
p{text-align:center;}
</style>
<script>
window.onload=function(){
var n=5;
var colors=["red","orange","blue","silver","gray","green"];
var timer1=null;
var timer2=null;
var oBtn=document.getElementsByTagName("input");
var oDiv=document.getElementsByTagName("div")[0];
var i=0;
oBtn[0].onclick=function(){
clearInterval(timer1);
clearInterval(timer2);
timer1=setInterval(colorChange,1000);
timer2=setInterval(countdown,1000);
}
oBtn[1].onclick=function(){
clearInterval(timer1);
clearInterval(timer2);
}
function countdown(){
if( n>=0){
document.getElementById("num").innerHTML=n;
n--;
}else{
n=5;
}
}
function colorChange(){
oDiv.style.backgroundColor=colors[i];
i++;
i=i%colors.length;
}
}
</script>
</head>
<body>
<div>
<p>倒计时:<span id="num">5</span></p>
</div>
<input type="button" value="start">
<input type="button" value="stop">
</body>
</html>