本文實例講述了JS基于面向對象實現的多個倒計時器功能。分享給大家供大家參考，具體如下：
運行效果圖如下：
實現代碼如下：
代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript測試文件</title>
</head>
<body>
<div><span id="hour0">0</span>小時</div>
<div><span id="minute0">0</span>分</div>
<div><span id="seconds0">10</span>秒</div>
<br/>
<div><span id="hour1">1</span>小時</div>
<div><span id="minute1">31</span>分</div>
<div><span id="seconds1">31</span>秒</div>
<br/>
<div><span id="hour2">2</span>小時</div>
<div><span id="minute2">32</span>分</div>
<div><span id="seconds2">32</span>秒</div>
<br/>
<div><span id="hour3">3</span>小時</div>
<div><span id="minute3">33</span>分</div>
<div><span id="seconds3">33</span>秒</div>
<br/>
<div><span id="hour4">4</span>小時</div>
<div><span id="minute4">34</span>分</div>
<div><span id="seconds4">34</span>秒</div>
<br/>
</body>
</html>
<script type="text/javascript">
//名山計時器：
function msTimeCount(){
this._hour=0; //“小時”數
this._minute=0; //“分”數
this._seconds=0; //“秒”數
//
this._hourHtmlObj={};//“小時”html對象
this._minuteHtmlObj={};//“分”html對象
this._secondsHtmlObj={};//“秒”html對象
//
this._totalSeconds=0;//總秒數
};
msTimeCount.prototype={
//1.獲取對象
$:function(ID){
return document.getElementById(ID);
},
//2.初始化：
/*
* arrTime: 傳入時間數組，格式為[1,30,30]，代表 1小時30分30秒;
* arrHtmlObj: 更新時間數據的Html對象數組，格式為["hour","minute","seconds"];
*/
init:function(arrTime,arrHtmlObj){
var _this=this;
_this._hour=parseInt(arrTime[0]);
_this._minute=parseInt(arrTime[1]);
_this._seconds=parseInt(arrTime[2]);
_this._hourHtmlObj=_this.$(arrHtmlObj[0]);
_this._minuteHtmlObj=_this.$(arrHtmlObj[1]);
_this._secondsHtmlObj=_this.$(arrHtmlObj[2]);
_this._totalSeconds=parseInt(_this._hour*60*60+_this._minute*60+_this._seconds);
//開始計時：
_this.timeCount();
},
//3.計時器：
timeCount:function(){
var _this=this;
var tmpTimeCount=setInterval(
function(){
_this._totalSeconds--;
//alert(_this._totalSeconds);
_this.refreshTime();
if(_this._totalSeconds<1){
clearInterval(tmpTimeCount);
return;
}
}
,1000);
},
//4.刷新頁面時間:
refreshTime:function(){
var _this=this;
if(_this._totalSeconds>0){
_this._hour=parseInt(_this._totalSeconds/3600);
_this._minute=parseInt((_this._totalSeconds-_this._hour*3600)/60);
_this._seconds=_this._totalSeconds-_this._hour*3600-_this._minute*60;
}else{
_this._hour=_this._minute=_this._seconds=0;
}
_this._hourHtmlObj.innerHTML=_this._hour;
_this._minuteHtmlObj.innerHTML=_this._minute;
_this._secondsHtmlObj.innerHTML=_this._seconds;
}
}
var timeCount0=new msTimeCount();
timeCount0.init([0,0,10],["hour0","minute0","seconds0"]);
var timeCount1=new msTimeCount();
timeCount1.init([1,31,31],["hour1","minute1","seconds1"]);
var timeCount2=new msTimeCount();
timeCount2.init([2,32,32],["hour2","minute2","seconds2"]);
var timeCount3=new msTimeCount();
timeCount3.init([3,33,33],["hour3","minute3","seconds3"]);
var timeCount4=new msTimeCount();
timeCount4.init([4,34,34],["hour4","minute4","seconds4"]);
</script>
PS：這里再為大家推薦幾款時間及計時器相關工具供大家參考使用：
在線秒表工具：
http://tools.jb51.net/bianmin/miaobiao
Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime
在線世界各地時間查詢：
http://tools.jb51.net/zhuanhuanqi/worldtime
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
