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静态方法与实例方法分析
Jul 04 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
bootstrap表单示例代码分享
May 18 Javascript
ztree实现权限横向显示功能
May 20 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Python操作串口的方法
2015/06/17 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python安装gdal的两种方法
2019/10/29 Python
Python类反射机制使用实例解析
2019/12/30 Python
pytorch之添加BN的实现
2020/01/06 Python
python怎么自定义捕获错误
2020/06/29 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
python实现图片转字符画
2021/02/19 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
PHP面试题大全
2015/10/16 面试题
Shell如何接收变量输入
2016/08/06 面试题
和平主题的演讲稿
2014/01/12 职场文书
演讲主持词
2014/03/18 职场文书
战友聚会主持词
2014/04/02 职场文书
高考励志标语
2014/06/05 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
五年级数学教学反思
2016/02/16 职场文书
python程序的组织结构详解
2021/12/06 Python
搭建Yolov5服务器
2022/04/30 Servers