倒計時——從10倒數到0，點擊按鈕會還原倒計時 <body> <!-- 將textvalue值設為10，從10倒數 --> <input type="text" value="10" id="txt"> <input type="button" value="重新開始" id="btn"> </bo ...
倒計時——從10倒數到0，點擊按鈕會還原倒計時
<body>
<!-- 將textvalue值設為10，從10倒數 -->
<input type="text" value="10" id="txt">
<input type="button" value="重新開始" id="btn">
</body>
<script>
var oT = document.getElementById("txt");
var oB = document.getElementById("btn");
var timer;
//封裝一個開始倒數的函數
function start(){
//開啟計時器，每秒text框中的數值自減1
timer = setInterval(function(){
oT.value--;
//當text框中的數值為0時，停止計時器
if(oT.value<=0){
clearInterval(timer);
}
},1000)
}
//封裝一個清楚延時器的函數
function stop(){
clearTimeout(timer);
}
//當網頁載入完畢時的行為如下
window.onload = function(){
//只要text裡面的數值還未到0，則不停地以每秒減一的速度進行著
if(oT.value>0){
start();
//一旦清零，就停止
}else{
stop();
}
}
//當點擊按鈕時的行為
oB.onclick = function(){
//此處要設清除計時器，否則中斷text倒數後的重新倒數將會加速，甚至會遞減到負值
clearInterval(timer);
//點擊按鈕後，無論text中的數值時多少，都變為10
oT.value = 10;
//重覆上面函數的行為
if(oT.value>0){
start();
}else{
stop();
}
}
</script>
