基于jquery插件編寫countdown計(jì)時(shí)器
更新時(shí)間：2016年06月12日 10:36:21 作者：愛邱
這篇文章主要為大家詳細(xì)介紹了jquery插件編寫countdown計(jì)時(shí)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
廢話不多說，直接上代碼：
先展示一下插件調(diào)用方式：
1. 需要先加載countdown插件對應(yīng)的css文件，也就幾行代碼而已，可以不用引入，自己手寫一樣啦
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒計(jì)時(shí)插件</title> <link rel="stylesheet" type="text/css" 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,
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.然后定義一個(gè)顯示時(shí)間的元素，初始化配置后就可以看到計(jì)時(shí)啦
<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({
//活動(dòng)開始時(shí)間 (可采用時(shí)間戳 或者 標(biāo)準(zhǔn)日期時(shí)間格式 "yyyy/MM/dd HH:mm:ss")
//優(yōu)先采取元素的data-stime值(該值只能為時(shí)間戳格式)
startTime: '2016/6/11 17:54:00',//活動(dòng)結(jié)束時(shí)間 (可采用時(shí)間戳 或者 標(biāo)準(zhǔn)日期時(shí)間格式 "yyyy/MM/dd HH:mm:ss")
//優(yōu)先采取元素的data-etime值(該值只能為時(shí)間戳格式)
endTime: '2016/6/11 17:55:00',
//活動(dòng)開始前倒計(jì)時(shí)的修飾
//可自定義元素,例如"<span>距離活動(dòng)開始倒計(jì)時(shí)還有:</span>"
beforeStart: '距離活動(dòng)開始倒計(jì)時(shí)還有:',
//活動(dòng)進(jìn)行中倒計(jì)時(shí)的修飾
//可自定義元素,例如"<span>距離活動(dòng)截止還有:</span>"
beforeEnd: '距離活動(dòng)截止還有:',
//活動(dòng)結(jié)束后的修飾
//可自定義元素,例如"<span>活動(dòng)已結(jié)束</span>"
afterEnd: '親，活動(dòng)結(jié)束啦，請繼續(xù)關(guān)注哦!',
//時(shí)間格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)
format: 'dd:hh:mm:ss',
//活動(dòng)結(jié)束后的回調(diào)函數(shù)
callback: function() {
console.log('親，活動(dòng)結(jié)束啦，請繼續(xù)關(guān)注哦!');
}
});
</script>
</body>
然后附上countdown插件的源代碼，大神們看了不要見笑哈...
/**
* 簡單的jquery購物商城秒殺倒計(jì)時(shí)插件
* @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;
}
//默認(rèn)配置
var defaults = {
//活動(dòng)開始時(shí)間 (可采用時(shí)間戳 或者 標(biāo)準(zhǔn)日期時(shí)間格式 "yyyy/MM/dd HH:mm:ss")
//優(yōu)先采取元素的data-stime值(該值只能為時(shí)間戳格式)
startTime: '2016/6/11 21:00:00',
//活動(dòng)結(jié)束時(shí)間 (可采用時(shí)間戳 或者 標(biāo)準(zhǔn)日期時(shí)間格式 "yyyy/MM/dd HH:mm:ss")
//優(yōu)先采取元素的data-etime值(該值只能為時(shí)間戳格式)
endTime: '2016/6/11 24:00:00',
//活動(dòng)開始前倒計(jì)時(shí)的修飾
//可自定義元素,例如"<span>距離活動(dòng)開始倒計(jì)時(shí)還有:</span>"
beforeStart: '距離活動(dòng)開始倒計(jì)時(shí)還有:',
//活動(dòng)進(jìn)行中倒計(jì)時(shí)的修飾
//可自定義元素,例如"<span>距離活動(dòng)截止還有:</span>"
beforeEnd: '距離活動(dòng)截止還有:',
//活動(dòng)結(jié)束后的修飾
//可自定義元素,例如"<span>活動(dòng)已結(jié)束</span>"
afterEnd: '活動(dòng)已結(jié)束',
//時(shí)間格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)
format: 'dd:hh:mm:ss',
//活動(dòng)結(jié)束后的回調(diào)函數(shù)
callback: function() {
return false;
}
};
//根據(jù)時(shí)間格式渲染對應(yīng)結(jié)構(gòu)
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>時(shí)' + '<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>時(shí)' + '<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 時(shí)間差換算并進(jìn)行格式化操作]
* @param {[Object]} _this_ [jquery對象]
* @param {[Number]} sTime [當(dāng)前時(shí)間]
* @param {[Number]} eTime [結(jié)束時(shí)間]
* @param {[String]} desc [時(shí)間修飾]
* @param {[String]} format [時(shí)間格式]
* @return {[Function]} strategies [根據(jù)格式渲染對應(yīng)結(jié)構(gòu)]
*/
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;
});
//將時(shí)間格式通過":"符號(hào)進(jìn)行分組
var timeArr = String.prototype.split.call(format, ':');
/**
* [render 通過分組情況渲染對應(yīng)結(jié)構(gòu)]
* @param {[Object]} _this_ [jquery對象]
* @param {[Number]} timeArrLen [時(shí)間分組后的數(shù)組長度]
* @param {[Array]} timeArr [時(shí)間分組后的數(shù)組]
* @param {[String]} desc [時(shí)間修飾]
* @return {[Function]} strategies [根據(jù)數(shù)組長度渲染對應(yīng)結(jié)構(gòu)]
*/
var render = function(_this_, timeArrLen, timeArr, desc) {
return strategies[timeArrLen](_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值(該值只能為時(shí)間戳格式)
var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();
//優(yōu)先采取元素的data-etime值(該值只能為時(shí)間戳格式)
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) {
//活動(dòng)暫未開始
killTime($this, nowTime, sTime, opts.beforeStart, opts.format);
} else if (nowTime >= sTime && nowTime <= eTime) {
//活動(dòng)進(jìn)行中
killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);
} else {
//活動(dòng)已結(jié)束
clearInterval(_timer);
$this.html(opts.afterEnd);
if (opts.callback && $.isFunction(opts.callback)) {
opts.callback.call($this);
}
}
}, 1000);
});
}
});
});
然后再來幾個(gè)效果圖吧:
精彩專題分享：js實(shí)現(xiàn)倒計(jì)時(shí)功能匯總
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jQuery有所幫助
您可能感興趣的文章:
- 使用jquery讀取html5 localstorage的值的方法
- jQuery訪問瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法
- jQuery timers計(jì)時(shí)器簡單應(yīng)用說明
- 基于JQuery.timer插件實(shí)現(xiàn)一個(gè)計(jì)時(shí)器
- jquery 顯示*天*時(shí)*分*秒實(shí)現(xiàn)時(shí)間計(jì)時(shí)器
- jQuery實(shí)現(xiàn)簡單的計(jì)時(shí)器功能實(shí)例分析
- sliderToggle在寫jquery的計(jì)時(shí)器setTimeouter中不生效
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
- jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器(商城可用)
- 利用jQuery+localStorage實(shí)現(xiàn)一個(gè)簡易的計(jì)時(shí)器示例代碼
相關(guān)文章
jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)
這篇文章主要介紹了jquery 構(gòu)造函數(shù)在表單提交過程中修改數(shù)據(jù)的方法，十分簡單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
看了前面兩講的54淘客網(wǎng)友，我想應(yīng)該對JQuery已經(jīng)有了個(gè)初步的認(rèn)識(shí)，知道如何用JQuery選擇器來獲取控件的值，今天我們主要講使用JQuery對常用控件的取值。2010-07-07
本文給大家分享的是一則使用jQuery實(shí)現(xiàn)公告的翻滾效果的代碼，十分簡潔實(shí)用，兼容性也非常不錯(cuò)，這里推薦給小伙伴們2015-02-02
下面小編就為大家?guī)硪黄褂肑Query選擇HTML遍歷函數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
本文詳細(xì)講解了jQuery中的事件，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
本文為大家詳細(xì)介紹下如何使用jquery觸發(fā)a標(biāo)簽的跳轉(zhuǎn)事件，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法,結(jié)合實(shí)例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
本篇文章主要是對jquery中的event對象屬性與方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jQuery滾動(dòng)插件scrollable.js用法分析
這篇文章主要介紹了jQuery滾動(dòng)插件scrollable.js用法,簡單分析了scrollable.js的功能、方法及相關(guān)使用技巧,需要的朋友可以參考下2017-05-05
jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果
這篇文章主要介紹了jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果2018-01-01