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 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
js模拟F11页面全屏显示
Sep 17 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
python字符串连接方法分析
2016/04/12 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
What is EJB
2016/07/22 面试题
40岁生日感言
2014/02/15 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年后勤工作总结
2014/11/18 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python