本文實(shí)例講述了JS基于面向?qū)ο髮?shí)現(xiàn)的多個倒計(jì)時(shí)器功能。分享給大家供大家參考，具體如下：
運(yùn)行效果圖如下：
實(shí)現(xiàn)代碼如下：
代碼
<!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>小時(shí)</div> <div><span id="minute0">0</span>分</div> <div><span id="seconds0">10</span>秒</div> <br/> <div><span id="hour1">1</span>小時(shí)</div> <div><span id="minute1">31</span>分</div> <div><span id="seconds1">31</span>秒</div> <br/> <div><span id="hour2">2</span>小時(shí)</div> <div><span id="minute2">32</span>分</div> <div><span id="seconds2">32</span>秒</div> <br/> <div><span id="hour3">3</span>小時(shí)</div> <div><span id="minute3">33</span>分</div> <div><span id="seconds3">33</span>秒</div> <br/> <div><span id="hour4">4</span>小時(shí)</div> <div><span id="minute4">34</span>分</div> <div><span id="seconds4">34</span>秒</div> <br/> </body></html><script type="text/javascript">//名山計(jì)時(shí)器：function msTimeCount(){ this._hour=0; //“小時(shí)”數(shù) this._minute=0; //“分”數(shù) this._seconds=0; //“秒”數(shù) // this._hourHtmlObj={};//“小時(shí)”html對象 this._minuteHtmlObj={};//“分”html對象 this._secondsHtmlObj={};//“秒”html對象 // this._totalSeconds=0;//總秒數(shù)};msTimeCount.prototype={ //1.獲取對象 $:function(ID){ return document.getElementById(ID); }, //2.初始化： /* * arrTime: 傳入時(shí)間數(shù)組，格式為[1,30,30]，代表 1小時(shí)30分30秒; * arrHtmlObj: 更新時(shí)間數(shù)據(jù)的Html對象數(shù)組，格式為["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); //開始計(jì)時(shí)： _this.timeCount(); }, //3.計(jì)時(shí)器： 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.刷新頁面時(shí)間: 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：這里再為大家推薦幾款時(shí)間及計(jì)時(shí)器相關(guān)工具供大家參考使用：
在線秒表工具：
http://tools.VeVB.COm/bianmin/miaobiao
Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/unixtime
在線世界各地時(shí)間查詢：
http://tools.VeVB.COm/zhuanhuanqi/worldtime
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時(shí)間與日期操作技巧總結(jié)》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
