JavaScript实现的一个倒计时的类


Posted in Javascript onMarch 12, 2015

近期在做排列五的彩票项目,每一期都有购彩时段,即用户打开这个排列五的页面时,会从服务器传来一个remaintime(离本次彩期结束的剩余时间),然后这个时间在客户端递减呈现给用户看,让用户获得本次彩期的剩余时间。

实现原理挺简单的,在此不在赘述,运行以下代码查看demo:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>index</title>
<style type="text/css">
em{color:#f00;}
</style>
</head>

<body>
<div id="remaintime"></div>
<script type="text/javascript">

var TheTime = function(){
 this.init.apply(this,arguments);
};

TheTime.prototype = {
 init: function(obj){
 var that = this;
 obj = that.buildParam(obj);
 that.callback = obj.callback;
 var container = that.container = document.getElementById(obj.container);
 container.innerHTML = '<em></em>小时<em></em>分钟<em></em>秒';
 var hourSpace = that.hourSpace = container.getElementsByTagName('em')[0];
 var minuteSpace = that.minuteSpace = container.getElementsByTagName('em')[1];
 var secondSpace = that.secondSpace = container.getElementsByTagName('em')[2];
 if(obj.remaintime==0){
  that.resetTime();
  return;
 }

 that.hours = Math.floor(obj.remaintime/3600);
 that._remainder1 = obj.remaintime % 3600;
 that.minutes = Math.floor(that._remainder1/60);
 that.seconds = that._remainder1 % 60;
 var timer = that.timer = setInterval(function(){
  that.renderTime.apply(that);
 },1000);
 },
 buildParam: function(obj){
 obj = {
  //container为dom节点的id
  container: obj.container || 'container',
  remaintime: Number(obj.remaintime) || 0,
  //倒计时完成后的回调
  callback: obj.callback || new Function
 };
 return obj;
 },
 resetTime: function(){
 var that = this;
 that.container.innerHTML = "已经截止";
 },
 //刷新时间
 renderTime: function(){
 //debugger;
 var that = this;
 if(that.seconds>0){
  that.seconds--;
 }else{
  that.seconds = 59;
  if(that.minutes>0){
  that.minutes--;
  }else{
  that.minutes = 59;
  if(that.hours>0){
   that.hours--;
  }
  }
 }
 
 //时刻监听
 if(that.hours==0 && that.minutes==0 && that.seconds==0){
  //执行回调
  that._callback();
 }
 var bitHandle = that.bitHandle;

 var _hour = bitHandle(that.hours);
 var _minute = bitHandle(that.minutes);
 var _second = bitHandle(that.seconds);
 that.hourSpace.innerHTML = _hour;
 that.minuteSpace.innerHTML = _minute;
 that.secondSpace.innerHTML = _second;
 },
 //对于位数的处理,确保返回两位数
 bitHandle: function(num){
 var str = num.toString();
 if(str.length<2){
  str = 0 + str;
 }
 return str;
 },
 _callback: function(){
 var that = this;
 clearInterval(that.timer);
 that.callback();
 }

};

new TheTime({
 //容器id
 container: 'remaintime',
 //服务器返回的剩余时间,单位为秒
 remaintime: 10000,
 //倒计时完成时的回调
 callback: function(){
 document.getElementById('remaintime').innerHTML = '已截止';
 }
});
</script>
</body>
</html>
Javascript 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
javascript实现tab切换特效
Nov 12 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JavaScript将XML转成JSON的方法
Mar 12 #Javascript
JavaScript中诡异的delete操作符
Mar 12 #Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 #Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 #Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 #Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 #Javascript
JavaScript中return false的用法
Mar 12 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php将html转为图片的实现方法
2017/05/19 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python中进程和线程的区别详解
2017/10/29 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
主管职责范文
2013/11/09 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
打架检讨书300字
2014/02/02 职场文书
竞聘书模板
2014/03/31 职场文书
社团活动总结范文
2014/04/26 职场文书
班级文化标语
2014/06/23 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书