之前同学做个购物商城秒杀活动需要计时器的功能，在用jquery提供的countdown插件时，一直报错，貌似还需要依赖除jquery之外的其他插件，搞了半天也没搞成功，就叫我帮忙写个。然而我并没有写过插件，不过刚好趁这次端午好好地锻炼一把吧，顺便在这儿存个代码，自己的思路不好，大神们请不要见笑哈...
废话不多说，直接上代码：
=======================================请叫我华丽的分割线=======================================
先展示一下插件调用方式：
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='/images/loading.gif' data-original="js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.countdown-1.0.0.min.js"></script>
3.然后定义一个显示时间的元素，初始化配置后就可以看到计时啦
<body> <div id="countdown"></div> <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src='/images/loading.gif' data-original="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插件的源代码，大神们看了不要见笑哈...
1 /** 2 * 简单的jquery购物商城秒杀倒计时插件 3 * @date 2016-06-11 4 * @author TangShiwei 5 * @email 591468061@qq.com 6 */ 7 ;(function(factory) { 8 "use strict"; 9 // AMD RequireJS 10 if (typeof define === "function" && define.amd) { 11 define(["jquery"], factory); 12 } else { 13 factory(jQuery); 14 } 15 })(function($) { 16 "use strict"; 17 $.fn.extend({ 18 countdown: function(options) { 19 if (options && typeof(options) !== 'object') { 20 return false; 21 } 22 //默认配置 23 var defaults = { 24 //活动开始时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss") 25 //优先采取元素的data-stime值(该值只能为时间戳格式) 26 startTime: '2016/6/11 21:00:00', 27 //活动结束时间 (可采用时间戳 或者 标准日期时间格式 "yyyy/MM/dd HH:mm:ss") 28 //优先采取元素的data-etime值(该值只能为时间戳格式) 29 endTime: '2016/6/11 24:00:00', 30 //活动开始前倒计时的修饰 31 //可自定义元素,例如"<span>距离活动开始倒计时还有:</span>" 32 beforeStart: '距离活动开始倒计时还有:', 33 //活动进行中倒计时的修饰 34 //可自定义元素,例如"<span>距离活动截止还有:</span>" 35 beforeEnd: '距离活动截止还有:', 36 //活动结束后的修饰 37 //可自定义元素,例如"<span>活动已结束</span>" 38 afterEnd: '活动已结束', 39 //时间格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等) 40 format: 'dd:hh:mm:ss', 41 //活动结束后的回调函数 42 callback: function() { 43 return false; 44 } 45 }; 46 //根据时间格式渲染对应结构 47 var strategies = { 48 "4": function($this, timeArr, desc) { 49 return $this.html(desc + '<span >' + timeArr[0] + '</span>天' + '<span >' + timeArr[1] + '</span>时' + '<span >' + timeArr[2] + '</span>分' + '<span >' + timeArr[3] + '</span>秒'); 50 }, 51 "3": function($this, timeArr, desc) { 52 return $this.html(desc + '<span >' + timeArr[0] + '</span>时' + '<span >' + timeArr[1] + '</span>分' + '<span >' + timeArr[2] + '</span>秒'); 53 }, 54 "2": function($this, timeArr, desc) { 55 return $this.html(desc + '<span >' + timeArr[0] + '</span>分' + '<span >' + timeArr[1] + '</span>秒'); 56 }, 57 "1": function($this, timeArr, desc) { 58 return $this.html(desc + '<span >' + timeArr[0] + '</span>秒'); 59 } 60 }; 61 /** 62 * [killTime 时间差换算并进行格式化操作] 63 * @param {[Object]} _this_ [jquery对象] 64 * @param {[Number]} sTime [当前时间] 65 * @param {[Number]} eTime [结束时间] 66 * @param {[String]} desc [时间修饰] 67 * @param {[String]} format [时间格式] 68 * @return {[Function]} strategies [根据格式渲染对应结构] 69 */ 70 var killTime = function(_this_, sTime, eTime, desc, format) { 71 var diffSec = (eTime - sTime) / 1000; 72 var map = { 73 h: Math.floor(diffSec / (60 * 60)) % 24, 74 m: Math.floor(diffSec / 60) % 60, 75 s: Math.floor(diffSec % 60) 76 }; 77 var format = format.replace(/([dhms])+/g, function(match, subExp) { 78 var subExpVal = map[subExp]; 79 if (subExpVal !== undefined) { 80 if (match.length > 1) { 81 subExpVal = '0' + subExpVal; 82 subExpVal = subExpVal.substr(subExpVal.length - match.length); 83 return subExpVal; 84 } 85 } else if (subExp === 'd') { 86 if (match.length >= 1 && match.length < 4) { 87 map[subExp] = Math.floor(diffSec / (60 * 60 * 24)); 88 var d = '00' + map[subExp]; 89 return d.substr(d.length - match.length); 90 } 91 } 92 return match; 93 }); 94 //将时间格式通过":"符号进行分组 95 var timeArr = String.prototype.split.call(format, ':'); 96 /** 97 * [render 通过分组情况渲染对应结构] 98 * @param {[Object]} _this_ [jquery对象] 99 * @param {[Number]} timeArrLen [时间分组后的数组长度]100 * @param {[Array]} timeArr [时间分组后的数组]101 * @param {[String]} desc [时间修饰]102 * @return {[Function]} strategies [根据数组长度渲染对应结构]103 */104 var render = function(_this_, timeArrLen, timeArr, desc) {105 return strategies[timeArrLen](_this_, timeArr, desc);106 };107 render(_this_, timeArr.length, timeArr, desc);108 }109 //覆盖默认配置110 var opts = $.extend({}, defaults, options);111 return this.each(function() {112 var $this = $(this);113 var _timer = null;114 //优先采取元素的data-stime值(该值只能为时间戳格式)115 var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();116 //优先采取元素的data-etime值(该值只能为时间戳格式)117 var eTime = $this.data('etime') ? parseInt($this.data('etime'), 10) : (new Date(opts.endTime)).getTime();118 if (_timer) {119 clearInterval(_timer);120 }121 _timer = setInterval(function() {122 var nowTime = (new Date()).getTime();123 if (nowTime < sTime) {124 //活动暂未开始125 killTime($this, nowTime, sTime, opts.beforeStart, opts.format);126 } else if (nowTime >= sTime && nowTime <= eTime) {127 //活动进行中128 killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);129 } else {130 //活动已结束131 clearInterval(_timer);132 $this.html(opts.afterEnd);133 if (opts.callback && $.isFunction(opts.callback)) {134 opts.callback.call($this);135 }136 }137 }, 1000);138 });139 }140 });141 });源代码
然后再来几个效果图吧:
原标题：第一次写jquery插件，来个countdown计时器吧
关键词：jquery
我知道了 