JavaScript分秒倒數計時器實作方法_javascript技巧

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

希望本文所述對大家的javascript程式設計有所幫助。