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


Posted in Javascript onFebruary 28, 2017

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

运行效果图如下:

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>
Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
js中删除数组中的某一元素实例(无下标时)
Feb 28 #Javascript
jQuery图片切换动画效果
Feb 28 #Javascript
jQuery 判断元素整理汇总
Feb 28 #Javascript
jQuery倒计时代码(超简单)
Feb 27 #Javascript
js实现图片左右滚动效果
Feb 27 #Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 #Javascript
原生js实现旋转木马轮播图效果
Feb 27 #Javascript
You might like
PHP 引用文件技巧
2010/03/02 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
django 控制页面跳转的例子
2019/08/06 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python判断正负数方式
2020/06/03 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
大型晚会策划方案
2014/02/06 职场文书
《颐和园》教学反思
2014/02/26 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
公司放假通知范文
2015/04/14 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android