首頁 > 開發者 > JavaScript
標籤：文本 調用 說明 w3c 狀態 window -- 計時 cti
一、基本目標
在JavaScript設計一個分秒倒計時器，一旦時間完畢使button變成不可點擊狀態
詳細效果例如以。為了說明問題。調成每50毫秒也就是每0.05跳一次表，
真正使用的時候，把window.onload=function(){...}中的setInterval("clock.move()",50);從50調成1000就可以。
在時間用完之前，button還是能夠點擊的。
時間用完之後。button就不能點擊了。
二、製作過程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>time remaining</title></head><!--html部分非常easy，須要被javascript控制的行內文本與提交button都被編上ID--><body>剩餘時間：<span id="timer"></span><input id="go" type="submit" value="go" /></body></html><script>/*主函數要使用的函數，進行聲明*/var clock=new clock();/*指向計時器的指標*/var timer;window.onload=function(){/*主函數就在每50秒調用1次clock函數中的move方法就可以*/timer=setInterval("clock.move()",50);}function clock(){/*s是clock()中的變數，非var那種全域變數，代表剩餘秒數*/this.s=140;this.move=function(){/*輸出前先調用exchange函數進行秒到分秒的轉換，由於exchange並不是在主函數window.onload使用，因此不須要進行聲明*/document.getElementById("timer").innerHTML=exchange(this.s);/*每被調用一次。剩餘秒數就自減*/this.s=this.s-1;/*假設時間耗盡，那麼。彈窗，使button不可用，停止不停調用clock函數中的move()*/if(this.s<0){alert("時間到");document.getElementById("go").disabled=true;clearTimeout(timer);}}}function exchange(time){/*javascript的除法是浮點除法。必須使用Math.floor取其整數部分*/this.m=Math.floor(time/60);/*存在取餘運算*/this.s=(time%60);this.text=this.m+"分"+this.s+"秒";/*傳過來的形式參數time不要使用this，而其餘在本函數使用的變數則必須使用this*/return this.text;}</script>
【JavaScript】分秒倒計時器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
