基于jquery插件編寫countdown計時器

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網絡編程

來源：易賢網閱讀：1363 次日期：2016-06-20 13:50:02

溫馨提示：易賢網小編為您整理了“基于jquery插件編寫countdown計時器”,方便廣大網友查閱！

這篇文章主要為大家詳細介紹了jquery插件編寫countdown計時器，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

1. 需要先加載countdown插件對應的css文件，也就幾行代碼而已，可以不用引入，自己手寫一樣啦

<head>

<title>jquery countdown倒計時插件</title>

</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

3.然后定義一個顯示時間的元素，初始化配置后就可以看到計時啦

<body>

$('#countdown').countdown({

//活動開始時間 (可采用時間戳或者標準日期時間格式 "yyyy/MM/dd HH:mm:ss")

//優(yōu)先采取元素的data-stime值(該值只能為時間戳格式)

startTime: '2016/6/11 17:54:00',//活動結束時間 (可采用時間戳或者標準日期時間格式 "yyyy/MM/dd HH:mm:ss")

//優(yōu)先采取元素的data-etime值(該值只能為時間戳格式)

endTime: '2016/6/11 17:55:00',

//活動開始前倒計時的修飾

//可自定義元素,例如"<span>距離活動開始倒計時還有:</span>"

beforeStart: '距離活動開始倒計時還有:',

//活動進行中倒計時的修飾

//可自定義元素,例如"<span>距離活動截止還有:</span>"

beforeEnd: '距離活動截止還有:',

//活動結束后的修飾

//可自定義元素,例如"<span>活動已結束</span>"

afterEnd: '親，活動結束啦，請繼續(xù)關注哦!',

//時間格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)

format: 'dd:hh:mm:ss',

//活動結束后的回調函數

callback: function() {

console.log('親，活動結束啦，請繼續(xù)關注哦!');

}

});

</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")

//優(yōu)先采取元素的data-stime值(該值只能為時間戳格式)

startTime: '2016/6/11 21:00:00',

//活動結束時間 (可采用時間戳或者標準日期時間格式 "yyyy/MM/dd HH:mm:ss")

//優(yōu)先采取元素的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;

//優(yōu)先采取元素的data-stime值(該值只能為時間戳格式)

var 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 >= 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有所幫助

上一篇：跨域請求的完美解決方法(JSONP, CORS)

下一篇：Jquery 自定義事件實現發(fā)布/訂閱的簡單實例

易賢網手機網站地址：基于jquery插件編寫countdown計時器

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網絡編程

Shell中如何刪除文本比較長的行的實現方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數量統(tǒng)計實現方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現方法10月30日

解決出現Incorrect integer value的問題10月30日

jQuery實現切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網移動網站

2026上岸·考公考編培訓報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合