首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jquery插件编写countdown计时器

Posted in Javascript onJune 12, 2016

废话不多说，直接上代码：
先展示一下插件调用方式： 

1. 需要先加载countdown插件对应的css文件，也就几行代码而已，可以不用引入，自己手写一样啦 

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <title>jquery countdown倒计时插件</title>
 <link rel="stylesheet" type="text/css" href="css/jquery.countdown-1.0.0.css"/>
 </head>

css代码内容:

* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html,
body {
 font: 24px/1.5 'Microsoft YaHei', arial, tahoma, '\5b8b\4f53', sans-serif;
 font-weight: 700;
 background: #efefef;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

#countdown {
 width: 60%;
 margin: 20% auto;
 color: #ff4d4d;
}

.countdown-day,
.countdown-hour,
.countdown-minute,
.countdown-second {
 display: inline-block;
 margin: 0 .5rem;
 background: #ff3f0f;
 font-size: 2rem;
 font-weight: 700;
 color: #fff;
}

2.再加载js文件，在此之前得先引入jquery
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>
3.然后定义一个显示时间的元素，初始化配置后就可以看到计时啦

<body>
 <div id="countdown"></div>

 <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
 <script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>
 <script>
 $('#countdown').countdown({
 //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
 //优先采取元素的data-stime值(该值只能为时间戳格式)
 startTime: '2016/6/11 17:54:00',//活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
 //优先采取元素的data-etime值(该值只能为时间戳格式)   
 endTime: '2016/6/11 17:55:00',
 //活动开始前倒计时的修饰
 //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>"   
 beforeStart: '距离活动开始倒计时还有:',
 //活动进行中倒计时的修饰 
 //可自定义元素,例如"<span>距离活动截止还有:</span>" 
 beforeEnd: '距离活动截止还有:',
 //活动结束后的修饰
 //可自定义元素,例如"<span>活动已结束</span>"    
 afterEnd: '亲，活动结束啦，请继续关注哦!',
 //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)     
 format: 'dd:hh:mm:ss',
 //活动结束后的回调函数     
 callback: function() {
  console.log('亲，活动结束啦，请继续关注哦!');
 }
 });
 </script>
 </body>

然后附上countdown插件的源代码，大神们看了不要见笑哈...

/**
 * 简单的jquery购物商城秒杀倒计时插件
 * @date 2016-06-11
 * @author TangShiwei
 * @email 591468061@qq.com
 */
;(function(factory) {
 "use strict";
 // AMD RequireJS
 if (typeof define === "function" && define.amd) {
  define(["jquery"], factory);
 } else {
  factory(jQuery);
 }
 })(function($) {
 "use strict";
 $.fn.extend({
  countdown: function(options) {
  if (options && typeof(options) !== 'object') {
  return false;
  }
  //默认配置
  var defaults = {
  //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  //优先采取元素的data-stime值(该值只能为时间戳格式)
  startTime: '2016/6/11 21:00:00',
  //活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss")
  //优先采取元素的data-etime值(该值只能为时间戳格式)   
  endTime: '2016/6/11 24:00:00',
  //活动开始前倒计时的修饰
  //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>"   
  beforeStart: '距离活动开始倒计时还有:',
  //活动进行中倒计时的修饰 
  //可自定义元素,例如"<span>距离活动截止还有:</span>" 
  beforeEnd: '距离活动截止还有:',
  //活动结束后的修饰
  //可自定义元素,例如"<span>活动已结束</span>"    
  afterEnd: '活动已结束',
  //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)     
  format: 'dd:hh:mm:ss',
  //活动结束后的回调函数     
  callback: function() {     
  return false;
  }
  };
  //根据时间格式渲染对应结构
  var strategies = {
  "4": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-day">' + timeArr[0] + '</span>天' + 　'<span class="countdown-hour">' + timeArr[1] + '</span>时' + '<span class="countdown-minute">' + timeArr[2] + '</span>分' + '<span class="countdown-second">' + timeArr[3] + '</span>秒');
  },
  "3": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-hour">' + timeArr[0] + '</span>时' + '<span class="countdown-minute">' + timeArr[1] + '</span>分' + '<span class="countdown-second">' + timeArr[2] + '</span>秒');
  },
  "2": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-minute">' + timeArr[0] + '</span>分' + '<span class="countdown-second">' + timeArr[1] + '</span>秒');
  },
  "1": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-second">' + timeArr[0] + '</span>秒');
  }
  };
  /**
  * [killTime 时间差换算并进行格式化操作]
  * @param {[Object]} _this_ [jquery对象]
  * @param {[Number]} sTime [当前时间]
  * @param {[Number]} eTime [结束时间]
  * @param {[String]} desc [时间修饰]
  * @param {[String]} format [时间格式]
  * @return {[Function]} strategies [根据格式渲染对应结构]
  */
  var killTime = function(_this_, sTime, eTime, desc, format) {
  var diffSec = (eTime - sTime) / 1000;
  var map = {
  h: Math.floor(diffSec / (60 * 60)) % 24,
  m: Math.floor(diffSec / 60) % 60,
  s: Math.floor(diffSec % 60)
  };
  var format = format.replace(/([dhms])+/g, function(match, subExp) {
  var subExpVal = map[subExp];
  if (subExpVal !== undefined) {
   if (match.length > 1) {
   subExpVal = '0' + subExpVal;
   subExpVal = subExpVal.substr(subExpVal.length - match.length);
   return subExpVal;
   }
  } else if (subExp === 'd') {
   if (match.length >= 1 && match.length < 4) {
   map[subExp] = Math.floor(diffSec / (60 * 60 * 24));
   var d = '00' + map[subExp];
   return d.substr(d.length - match.length);
   }
  }
  return match;
  });
  //将时间格式通过":"符号进行分组
  var timeArr = String.prototype.split.call(format, ':');
  /**
  * [render 通过分组情况渲染对应结构]
  * @param {[Object]} _this_ [jquery对象]
  * @param {[Number]} timeArrLen [时间分组后的数组长度]
  * @param {[Array]} timeArr [时间分组后的数组]
  * @param {[String]} desc [时间修饰]
  * @return {[Function]} strategies [根据数组长度渲染对应结构]
  */
  var render = function(_this_, timeArrLen, timeArr, desc) {
  return strategies[timeArrLen](_this_, timeArr, desc);
  };
  render(_this_, timeArr.length, timeArr, desc);
  }
  //覆盖默认配置
  var opts = $.extend({}, defaults, options);
  return this.each(function() {
  var $this = $(this);
  var _timer = null;
  //优先采取元素的data-stime值(该值只能为时间戳格式)
  var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();
  //优先采取元素的data-etime值(该值只能为时间戳格式)
  var eTime = $this.data('etime') ? parseInt($this.data('etime'), 10) : (new Date(opts.endTime)).getTime();
  if (_timer) {
  clearInterval(_timer);
  }
  _timer = setInterval(function() {
  var nowTime = (new Date()).getTime();
  if (nowTime < sTime) {
   //活动暂未开始
   killTime($this, nowTime, sTime, opts.beforeStart, opts.format);
  } else if (nowTime >= sTime && nowTime <= eTime) {
   //活动进行中
   killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);
  } else {
   //活动已结束
   clearInterval(_timer);
   $this.html(opts.afterEnd);
   if (opts.callback && $.isFunction(opts.callback)) {
   opts.callback.call($this);
   }
  }
  }, 1000);
  });
  }
 });
 });

 然后再来几个效果图吧:

基于jquery插件编写countdown计时器

精彩专题分享：js实现倒计时功能汇总

以上就是本文的全部内容，希望对大家学习jQuery有所帮助

基于jquery插件编写countdown计时器

- Author -

爱邱

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
jquery ui对话框实例代码
May 10 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
javascript动画算法实例分析
Jul 31 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
如何快速上手Vuex
Feb 14 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 #Javascript
浅谈jquery的map()和each()方法
Jun 12 #Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 #Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 #Javascript
使用Script元素发送JSONP请求的方法
Jun 12 #Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 #Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 #Javascript
i5 9400(1) i7 6700(1) GTX1660(1) R71E(1) React(6) win10(43) ICOM(2) R72E(1) 对讲机(1) win11(40)
You might like
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php常用的url处理函数总结
2014/11/19 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
最丑的时钟效果！js canvas时钟制作方法
2016/08/15 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
Python 正则表达式入门（初级篇）
2016/12/07 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
C#基础面试题
2016/10/17 面试题
党员承诺书范文
2014/05/19 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
课改心得体会范文
2016/01/25 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js