主页 / 网络编程 /

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

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下

本文实例讲述了JS基于面向对象实现的多个倒计时器功能。分享给大家供大家参考，具体如下

运行效果图如下

实现代码如下

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://.w3./TR/html4/loose.dtd">
<html xmlns="http://.w3./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._hour6060+_this._minute60+_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._hour3600)/60);
   _this._seconds=_this._totalSeconds-_this._hour3600-_this._minute60;
  }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这里再为大家推荐几款时间及计时器相关工具供大家参考使用

在线秒表工具

Unix时间戳(timestamp)转换工具

在线世界各地时间查询

更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS实现浏览器打印、打印预览示例 下一篇：js中删除数组中的某一元素实例(无下标时)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by