首頁 > web前端 > js教程 > JavaScript分秒倒數計時器實作方法_javascript技巧

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

WBOY
發布: 2016-05-16 16:16:27
原創
1200 人瀏覽過

本文實例講述了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程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板