你的位置:首页 > Java教程

[Java教程]第一次写jquery插件,来个countdown计时器吧


     之前同学做个购物商城秒杀活动需要计时器的功能,在用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="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插件的源代码,大神们看了不要见笑哈...

 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  });

源代码

       然后再来几个效果图吧: