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 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
js实现飞机大战游戏
Aug 26 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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漏洞全解(详细介绍)
2012/11/13 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
vue分页器组件编写方法详解
2019/06/28 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Python 关于反射和类的特殊成员方法
2017/09/14 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python中有几个关键字
2020/06/04 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
北京振戎融通Java面试题
2015/09/03 面试题
电子商务个人职业生涯规划范文
2014/02/12 职场文书
联欢晚会主持词
2014/03/25 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Python利用folium实现地图可视化
2021/05/23 Python
OpenFeign实现远程调用
2022/08/14 Java/Android