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 相关文章推荐
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
js闭包实现按秒计数
Apr 23 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
js删除指定位置超链接中含有百度与360的标题
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+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python学习之time模块的基本使用
2021/01/17 Python
python asyncio 协程库的使用
2021/01/21 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
商务英语专业自荐信
2013/10/14 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
《母鸡》教学反思
2014/02/25 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
高中生学习计划书
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技