快捷導(dǎo)航

JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能示例

更新時(shí)間：2017年02月28日 08:53:01 作者：小炒花生米

這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蠹皶r(shí)間操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(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對(duì)象
 this._minuteHtmlObj={};//“分”html對(duì)象
 this._secondsHtmlObj={};//“秒”html對(duì)象
 //
 this._totalSeconds=0;//總秒數(shù)
};
msTimeCount.prototype={
 //1.獲取對(duì)象
 $:function(ID){
  return document.getElementById(ID);
 },
 //2.初始化：
 /*
  * arrTime:  傳入時(shí)間數(shù)組，格式為[1,30,30]，代表 1小時(shí)30分30秒;
  * arrHtmlObj: 更新時(shí)間數(shù)據(jù)的Html對(duì)象數(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.jb51.net/bianmin/miaobiao

Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/code/unixtime

在線世界各地時(shí)間查詢：
http://tools.jb51.net/zhuanhuanqi/worldtime

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時(shí)間與日期操作技巧總結(jié)》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: