基于jquery插件編寫countdown計時器_

1、基于jquery插件編寫countdown計時器_ 這篇文章主要為大家具體介紹了jquery插件編寫countdown計時器，具有肯定的參考價值，感愛好的小伙伴們可以參考一下 先展現(xiàn)一下插件調(diào)用方式： 1. 需要先加載countdown插件對應(yīng)的css文件，也就幾行代碼而已，可以不用引入，自己手寫一樣啦 head meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 / titlejquery countdown倒計時插件/title link rel=stylesheet type=text/c

2、ss href=css/jquery.countdown-1.0.0.css/ /head css代碼內(nèi)容: * 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, b

3、ody 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 displ

4、ay: 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 d

5、iv 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( /活動開頭時間 (可采納時間戳 或者 標(biāo)準(zhǔn)日期時間格式 yyyy/MM/dd HH:mm:ss) /優(yōu)先實行元素的data-stime值(該值只能為時間戳格式) startTime: 2021/6/11 17:54:00,/活動

6、結(jié)束時間 (可采納時間戳 或者 標(biāo)準(zhǔn)日期時間格式 yyyy/MM/dd HH:mm:ss) /優(yōu)先實行元素的data-etime值(該值只能為時間戳格式) endTime: 2021/6/11 17:55:00, /活動開頭前倒計時的修飾 /可自定義元素,例如span距離活動開頭倒計時還有:/span beforeStart: 距離活動開頭倒計時還有:, /活動進(jìn)行中倒計時的修飾 /可自定義元素,例如span距離活動截止還有:/span beforeEnd: 距離活動截止還有:, /活動結(jié)束后的修飾 /可自定義元素,例如span活動已結(jié)束/span afterEnd: 親，活動結(jié)束啦，請連續(xù)關(guān)

7、注哦!, /時間格式化(可采納ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss等) format: dd:hh:mm:ss, /活動結(jié)束后的回調(diào)函數(shù) callback: function() console.log(親，活動結(jié)束啦，請連續(xù)關(guān)注哦!); ); /script /body 然后附上countdown插件的源代碼，大神們看了不要見笑哈. /* * 簡潔的jquery購物商城秒殺倒計時插件 * date 2021-06-11 * author TangShiwei * email 591468061.com */ ;(function(fac

8、tory) 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; /默認(rèn)配置 var defaults = /活動開頭時間 (可采納時間戳 或者 標(biāo)準(zhǔn)日期時間格式 yyyy/MM/

9、dd HH:mm:ss) /優(yōu)先實行元素的data-stime值(該值只能為時間戳格式) startTime: 2021/6/11 21:00:00, /活動結(jié)束時間 (可采納時間戳 或者 標(biāo)準(zhǔn)日期時間格式 yyyy/MM/dd HH:mm:ss) /優(yōu)先實行元素的data-etime值(該值只能為時間戳格式) endTime: 2021/6/11 24:00:00, /活動開頭前倒計時的修飾 /可自定義元素,例如span距離活動開頭倒計時還有:/span beforeStart: 距離活動開頭倒計時還有:, /活動進(jìn)行中倒計時的修飾 /可自定義元素,例如span距離活動截止還有:/span

10、beforeEnd: 距離活動截止還有:, /活動結(jié)束后的修飾 /可自定義元素,例如span活動已結(jié)束/span afterEnd: 活動已結(jié)束, /時間格式化(可采納ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss等) format: dd:hh:mm:ss, /活動結(jié)束后的回調(diào)函數(shù) callback: function() return false; ; /依據(jù)時間格式渲染對應(yīng)結(jié)構(gòu) var strategies = 4: function($this, timeArr, desc) return $this.html(desc + span cl

11、ass=countdown-day + timeArr0 + /span天 + span class=countdown-hour + timeArr1 + /span時 + span class=countdown-minute + timeArr2 + /span分 + span class=countdown-second + timeArr3 + /span秒); , 3: function($this, timeArr, desc) return $this.html(desc + span class=countdown-hour + timeArr0 + /span時 + spa

12、n class=countdown-minute + timeArr1 + /span分 + span class=countdown-second + timeArr2 + /span秒); , 2: function($this, timeArr, desc) return $this.html(desc + span class=countdown-minute + timeArr0 + /span分 + span class=countdown-second + timeArr1 + /span秒); , 1: function($this, timeArr, desc) return

13、 $this.html(desc + span class=countdown-second + timeArr0 + /span秒); ; /* * killTime 時間差換算并進(jìn)行格式化操作 * param Object _this_ jquery對象 * param Number sTime 當(dāng)前時間 * param Number eTime 結(jié)束時間 * param String desc 時間修飾 * param String format 時間格式 * return Function strategies 依據(jù)格式渲染對應(yīng)結(jié)構(gòu) */ var killTime = function

14、(_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 = mapsubExp; if (subExpVal != und

15、efined) 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) mapsubExp = Math.floor(diffSec / (60 * 60 * 24); var d = 00 + mapsubExp; return d.substr(d.length - match.

16、length); return match; ); /將時間格式通過:符號進(jìn)行分組 var timeArr = Stotype.split.call(format, :); /* * render 通過分組狀況渲染對應(yīng)結(jié)構(gòu) * param Object _this_ jquery對象 * param Number timeArrLen 時間分組后的數(shù)組長度 * param Array timeArr 時間分組后的數(shù)組 * param String desc 時間修飾 * return Function strategies 依據(jù)數(shù)組長度渲染對應(yīng)結(jié)構(gòu) */ var render

17、 = function(_this_, timeArrLen, timeArr, desc) return strategiestimeArrLen(_this_, timeArr, desc); ; render(_this_, timeArr.length, timeArr, desc); /掩蓋默認(rèn)配置 var opts = $.extend(, defaults, options); return this.each(function() var $this = $(this); var _timer = null; /優(yōu)先實行元素的data-stime值(該值只能為時間戳格式) va

18、r sTime = $this.data(stime) ? parseInt($this.data(stime), 10) : (new Date(opts.startTime).getTime(); /優(yōu)先實行元素的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