一、 效果预览

二、 实现

1. 按照特定的类结构布局。

2. 需要先引入jQuery,再引入此文件。

  1. /**
  2. * Author: CC11001100
  3. *
  4. * 简单倒计时
  5. *
  6. * 1. 支持页面内同时存在多个计时器并且不互相干扰
  7. * 2. 支持多种格式,比如可以省略天、小时...等等,前面省略会自动加到后面,最多可以只有秒
  8. * 3. 倒计时可以是秒数,可以是时间戳,可以是日期时间(设置一种即可)
  9. *
  10. * Usage:
  11. *
  12. * <div class="timer-simple-seconds" timer="3600" timestamp="1482737420000" datetime="2016-12-26 15:30:20">
  13. * <span class="day">0</span>天
  14. * <span class="hour">00</span>时
  15. * <span class="minute">00</span>分
  16. * <span class="second">00</span>秒
  17. * </div>
  18. *
  19. */
  20. /**
  21. * 按结构查找,依赖结构和class
  22. */
  23. $(function(){
  24.  
  25. //对所有的计时器进行处理
  26. var timers=$(".timer-simple-seconds");
  27. for(var i=0;i<timers.length;i++){
  28. var timer=$(timers[i]);
  29.  
  30. if(timer.attr("timestamp")){
  31. //如果是时间戳,则预处理一下时间为倒计时秒数
  32. prepareProcessTimestamp2Timer(timer);
  33. }else if(timer.attr("datetime")){
  34. //处理时间格式为倒计时秒数
  35. prepareProcessDatetime2Timer(timer);
  36. }
  37. //先调用一次,避免误差
  38. processTimer(timer);
  39. setInterval(processTimer,1000,timer);
  40. }
  41.  
  42. /**
  43. * doWhat: 这个函数将时间戳预处理成统一的倒计时描述
  44. *
  45. * 对时间做一个预处理,因为如果服务器直接返回剩余的描述的话从服务器相应到客户端虽然短到几百毫秒但总是会有偏差的,这样子不太好
  46. * 所以服务器只需要设置一个时间戳表示到哪里停止就可以了
  47. */
  48. function prepareProcessTimestamp2Timer(timer){
  49. var total=parseInt(timer.attr("timestamp"));
  50. total=Math.round(total/1000);
  51. var now=new Date().getTime()/1000;
  52. timer.attr("timer",total-now);
  53. }
  54.  
  55. /**
  56. * 将日期时间格式转为倒计时格式
  57. */
  58. function prepareProcessDatetime2Timer(timer){
  59. var timestamp=new Date(timer.attr("datetime")).getTime();
  60. timer.attr("timestamp",timestamp);
  61. prepareProcessTimestamp2Timer(timer);
  62. }
  63.  
  64. /**
  65. * 倒计时,滴答滴答...
  66. * @param {Object} timer
  67. */
  68. function processTimer(timer){
  69. var total=parseInt(timer.attr("timer"));
  70. var t=total;
  71.  
  72. //倒计时不能为负
  73. if(total<0) return; //TODO 后续版本加上计时完毕可以回调函数
  74.  
  75. //找到显示时间的元素
  76. var day=timer.find(".day");
  77. var hour=timer.find(".hour");
  78. var minute=timer.find(".minute");
  79. var second=timer.find(".second");
  80.  
  81. //刷新计时器显示的值
  82. if(day.length){
  83. var d=Math.floor(t/(60*60*24));
  84. day.text(d);
  85. t-=d*(60*60*24);
  86. }
  87. if(hour.length){
  88. var h=Math.floor(t/(60*60));
  89. hour.text((h<10?"0":"")+h);
  90. t-=h*(60*60);
  91. }
  92. if(minute.length){
  93. var m=Math.floor(t/60);
  94. minute.text((m<10?"0":"")+m);
  95. t-=m*60;
  96. }
  97. if(second.length){
  98. second.text((t<10?"0":"")+t);
  99. }
  100.  
  101. //一秒过去了...
  102. total--;
  103. timer.attr("timer",total);
  104. }
  105.  
  106. });

说明:

1. timer表示剩余的秒数,timestamp表示一个未来的unix时间戳,datetime表示一个yyyy-MM-dd HH:mm:ss格式的字符串表示的时间。

2. 三者只设置一个即可,同时设置会冲突的。

github地址: https://github.com/BenDanChen/simpleTimer

jQuery简单倒计时插件的更多相关文章

  1. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  2. jQuery自适应倒计时插件

    jQuery自适应倒计时插件 在线演示本地下载

  3. js 简单倒计时插件和使用方法

    // 倒计时插件 (function (){ function countdown(config){ var startDate = config.start ? new Date(config.st ...

  4. jquery简单的插件

    $(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", //触发响应事件 ...

  5. jQuery简单日历插件版

    先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...

  6. jquery简单切换插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. jQuery.countdown倒计时插件

    https://github.com/hilios/jQuery.countdown 文档:http://hilios.github.io/jQuery.countdown/documentation ...

  8. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  9. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

随机推荐

  1. BZOJ3196: Tyvj 1730 二逼平衡树

    传送门 主席树的常数蜜汁优越,在BZOJ上跑了rnk1. 做法很简单,主席树套BIT. 1-3做法很简单,第四个和第五个做法转换成前两个就行了. //BZOJ 3196 //by Cydiater / ...

  2. 【mysql】mysql 常用建表语句

    [1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门.[2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primary ...

  3. 个人对B/S项目的一些理解(一)

    以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正.     B/S browser/server ----对于这两个软件的个人看法 本质上,也是两个软 ...

  4. Tomcat性能优化

    1.关闭AJP协议 注释以下配置 <!-- <Connector port="8009" protocol="AJP/1.3" redirectPo ...

  5. runtime-对成员变量操作应用之归档和返归档

    为了实现归档和返归档,我们要让被归档对象的类接受NSCoding协议并且实现协议里的两个方法 - (void)encodeWithCoder:(NSCoder *)aCoder; - (nullabl ...

  6. meta_value与meta_value_num的区别(排序)

    [meta_value与meta_value_num] //'meta_value' - 注意'meta_key=keyname' 必须也出现在查询中. 注意排序是按照字母表顺序进行的.(如:word ...

  7. 第四章 --- 关于Javascript 设计模式 之 迭代器模式

    今天我先写 两个常用的迭代器的 例子.(同学们先自行体会这二种迭代器的优缺点) 需求:比较两个数组是否相等 tips: 当数组的下标不为数字的时候,默认为 该键值对 为 对象. 然后迭代器的原理基本来 ...

  8. 5种 JavaScript 调用函数的方法

    一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性 ...

  9. ZOJ 3686 A Simple Tree Problem

    A Simple Tree Problem Time Limit: 3 Seconds      Memory Limit: 65536 KB Given a rooted tree, each no ...

  10. HTML5 canvas学习笔记(一)

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...