本文實例講述了JavaScript分秒倒數計時器實作方法。分享給大家供大家參考。具體分析如下:
一、基本目標
在JavaScript設計一個分秒倒數計時器,一旦時間完成使按鈕變成不可點擊狀態
具體效果如下圖,為了說明問題,調成每50毫秒也就是每0.05跳一次表,
真正使用的時候,把window.onload=function(){...}中的setInterval("clock.move()",50);從50調成1000即可。
在時間用完之前,按鈕還是可以點擊的。
時間用完之後,按鈕就不能點擊了。
二、製作過程
time remaining
剩餘時間:
<script> <br />
/*主函數要使用的函數,進行宣告*/ <br />
var clock=new clock(); <br />
/*指向計時器的指標*/ <br />
var timer; <br />
window.onload=function(){ <br />
/*主函數就在每50秒呼叫1次clock函數中的move方法即可*/ <br />
timer=setInterval("clock.move()",50); <br />
} <br />
function clock(){ <br />
/*s是clock()中的變量,非var那種全域變量,代表剩餘秒數*/ <br />
this.s=140; <br />
this.move=function(){ <br />
/*輸出前先呼叫exchange函數進行秒到分秒的轉換,因為exchange並非在主函數window.onload使用,因此不需要進行宣告*/ <br />
document.getElementById("timer").innerHTML=exchange(this.s); <br />
/*每被調用一次,剩餘秒數就自減*/ <br />
this.s=this.s-1; <br />
/*如果時間耗盡,那麼,彈窗,使按鈕不可用,停止不停呼叫clock函數中的move()*/ <br />
if(this.s<0){ <br />
alert("時間到"); <br />
document.getElementById("go").disabled=true; <br />
clearTimeout(timer); <br />
} <br />
} <br />
} <br />
function exchange(time){ <br />
/*javascript的除法是浮點除法,必須使用Math.floor取其整數部分*/ <br />
this.m=Math.floor(time/60); <br />
/*有取餘運算*/ <br />
this.s=(time`); <br />
this.text=this.m "分" this.s "秒"; <br />
/*傳過來的形式參數time不要使用this,其餘在本函數所使用的變數則必須使用this*/ <br />
return this.text; <br />
} <br />
</script>
希望本文所述對大家的javascript程式設計有所幫助。