精简版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var t = 9;
function time(){
if(t>=0){
setTimeout(function(){
document.getElementById("clock").innerHTML = t;
t--;
time();
},1000);
}
}
</script>
<h1 id="clock"></h1>
<input type="button" value="倒计时开始" onclick="time()">
</body>
</html>
花里胡哨版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var t = 9;
function time(){
if(t>=0){
setTimeout(function(){
setStyle();
document.getElementById("clock").innerHTML = t;
t--;
time();
},1000);
}
}
function setStyle(){
this.r = Math.floor(Math.random()*255);
this.g = Math.floor(Math.random()*255);
this.b = Math.floor(Math.random()*255);
document.body.style.color='rgb('+ this.r +','+ this.g +','+ this.b ;
}
</script>
<h1 id="clock"></h1>
<input type="button" value="倒计时开始" onclick="time()">
</body>
</html>
效果
