JS基于面向对象实现的多个倒计时器功能示例

更新时间：2017年02月28日 08:53:01 作者：小炒花生米

这篇文章主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
在我的这篇旧文里曾经发布了一个简单的ajax操作类。我们发现，在旧文里创建xmlhttp对象的时候，每次都要new一个对象。而我们都知道new一个对象的开销是很大的。
2010-01-01
微信小程序商城项目之购物数量加减(3)
这篇文章主要为大家详细介绍了微信小程序商城购物数量加减功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
JS 分号引起的一段调试问题
看看执行后有什么效果,无论textbox1.text是什么值,都会时放条件判断.为什么呢
2009-06-06
利用JavaScript编写一个简单的1024小游戏
在每年的10月24日,我们都会庆祝程序员节,这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子,为了纪念这个特殊的日子,我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意,本文将详细解释如何使用JavaScript编写这个小游戏
2023-10-10
js类型转换与引用类型详解(Boolean_Number_String)
本篇文章主要是对js中的类型转换与引用类型(Boolean_Number_String)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
js控制滚动条滚动的两种简单方法
这篇文章主要给大家介绍了关于js控制滚动条滚动的两种简单方法,通过JavaScript可以直接控制滚动条的位置,从而达到锁定滚动条的效果,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
JS出现404错误原理及解决方案
这篇文章主要介绍了JS出现404错误原理及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
innerHTML在IE中报错解决方案
这篇文章主要介绍了innerHTML在IE中报错解决方案,需要的朋友可以参考下
2014-12-12
使用Javascript简单实现图片无缝滚动
本文简单介绍了使用原生javascript实现简单的图片无缝滚动的方法，并附上示例代码，推荐给大家，直接可以用在项目中的。
2014-12-12
如何解决webpack-dev-server代理常切换问题
通常我们有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到开发服务器，来解决本地跨域问题。假如项目变大，可能需要proxy到不同环境，那么如何解决webpack-dev-server代理常切换问题，下面就一起来了解一下
2019-01-01