【JavaScript】分秒倒數計時器

一、基本目標

在JavaScript設計一個分秒倒數計時器，一旦時間完成使按鈕變成不可點擊狀態

具體效果如下圖，為了說明問題，調成每50毫秒也就是每0.05跳一次表，

真正使用的時候，把window.onload=function(){...}中的setInterval("clock.move()",50);從50調成1000即可。

在時間用完之前，按鈕還是可以點擊的。

時間用完之後，按鈕就不能點擊了。

二、製作過程

剩餘時間：



<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%60);<br/> this.text=this.m+"分"+this.s+"秒";<br/> /*傳過來的形式參數time不要使用this，而其餘在本函數使用的變數則必須使用this*/<br/> return this.text;<br/>}<br/></script>