本文實例講述了JavaScript分秒倒計時器實現方法。分享給大家供大家參考。具體分析如下：
一、基本目標
在JavaScript設計一個分秒倒計時器，一旦時間完成使按鈕變成不可點擊狀態
具體效果如下圖，為了說明問題，調成每50毫秒也就是每0.05跳一次表，
真正使用的時候，把window.onload=function(){...}中的setInterval("clock.move()",50);從50調成1000即可。
在時間用完之前，按鈕還是可以點擊的。
時間用完之後，按鈕就不能點擊了。
二、製作過程
複製代碼代碼如下:<!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部分很簡單，需要被javascript控制的行內文本與提交按鈕都被編上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;
/*如果時間耗盡，那麼，彈窗，使按鈕不可用，停止不停調用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程序設計有所幫助。