基于jquery插件编写countdown计时器_Javascript教程-查字典教程网

基于jquery插件编写countdown计时器

摘要：废话不多说，直接上代码：先展示一下插件调用方式：1.需要先加载countdown插件对应的css文件，也就几行代码而已，可以不用引入，自己手...

废话不多说，直接上代码：

先展示一下插件调用方式：

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, '5b8b4f53', 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

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>' + timeArr[0] + '</span>天' + '<span>' + timeArr[1] + '</span>时' + '<span>' + timeArr[2] + '</span>分' + '<span>' + timeArr[3] + '</span>秒'); }, "3": function($this, timeArr, desc) { return $this.html(desc + '<span>' + timeArr[0] + '</span>时' + '<span>' + timeArr[1] + '</span>分' + '<span>' + timeArr[2] + '</span>秒'); }, "2": function($this, timeArr, desc) { return $this.html(desc + '<span>' + timeArr[0] + '</span>分' + '<span>' + timeArr[1] + '</span>秒'); }, "1": function($this, timeArr, desc) { return $this.html(desc + '<span>' + 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计时器1