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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
jQuery之动画效果大全
Nov 09 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
js实现简单的秒表
Jan 16 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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代码保护--Zend Guard的使用详解
2013/06/03 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php json转换相关知识(小结)
2018/12/21 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
C有"按引用传递"吗
2016/09/06 面试题
中间件分为哪几类
2016/09/18 面试题
创业计划书的主要内容有哪些
2014/01/29 职场文书
函授药学自我鉴定
2014/02/07 职场文书
机关作风建设整改方案
2014/10/27 职场文书
大学生自荐书范文
2015/03/05 职场文书
离婚案件原告代理词
2015/05/23 职场文书
工作经历证明范本
2015/06/15 职场文书
七夕情人节问候语
2015/11/11 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis