jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時(shí)效果
本文實(shí)例講述了jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時(shí)效果。分享給大家供大家參考,具體如下:
<div id="fnTimeCountDown" data-end="">
<span class="mini">00</span>分
<span class="sec">00</span>秒
<span class="hm">000</span>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$.extend($.fn,{
fnTimeCountDown:function(d){
this.each(function(){
var $this = $(this);
var o = {
hm: $this.find(".hm"),
sec: $this.find(".sec"),
mini: $this.find(".mini"),
hour: $this.find(".hour"),
day: $this.find(".day"),
month:$this.find(".month"),
year: $this.find(".year")
};
var f = {
haomiao: function(n){
if(n < 10)return "00" + n.toString();
if(n < 100)return "0" + n.toString();
return n.toString();
},
zero: function(n){
var _n = parseInt(n, 10);//解析字符串,返回整數(shù)
if(_n > 0){
if(_n <= 9){
_n = "0" + _n
}
return String(_n);
}else{
return "00";
}
},
dv: function(){
//d = d || Date.UTC(2050, 0, 1); //如果未定義時(shí)間,則我們?cè)O(shè)定倒計(jì)時(shí)日期是2050年1月1日
var _d = $this.data("end") || d;
var now = new Date(),
endDate = new Date(_d);
//現(xiàn)在將來秒差值
//alert(future.getTimezoneOffset());
var dur = (endDate - now.getTime()) / 1000 , mss = endDate - now.getTime() ,pms = {
hm:"000",
sec: "00",
mini: "00",
hour: "00",
day: "00",
month: "00",
year: "0"
};
if(mss > 0){
pms.hm = f.haomiao(mss % 1000);
pms.sec = f.zero(dur % 60);
pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";
pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";
pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";
//月份,以實(shí)際平均每月秒數(shù)計(jì)算
pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
//年份,按按回歸年365天5時(shí)48分46秒算
pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";
}else{
pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00";
pms.hm = "000";
//alert('結(jié)束了');
return;
}
return pms;
},
ui: function(){
if(o.hm){
o.hm.html(f.dv().hm);
}
if(o.sec){
o.sec.html(f.dv().sec);
}
if(o.mini){
o.mini.html(f.dv().mini);
}
if(o.hour){
o.hour.html(f.dv().hour);
}
if(o.day){
o.day.html(f.dv().day);
}
if(o.month){
o.month.html(f.dv().month);
}
if(o.year){
o.year.html(f.dv().year);
}
setTimeout(f.ui, 1);
}
};
f.ui();
});
}
});
</script>
<script type="text/javascript">
$("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
</script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- 基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面關(guān)閉)
- jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
- jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法詳解
- 基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購秒殺效果
- jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例小結(jié)
- jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼
- JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
- jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)(倒計(jì)時(shí)年月日可自己輸入)
相關(guān)文章
jQuery ajax動(dòng)態(tài)生成table功能示例
這篇文章主要介紹了jQuery ajax動(dòng)態(tài)生成table功能,結(jié)合具體實(shí)例形式分析了jQuery基于ajax數(shù)據(jù)交互動(dòng)態(tài)創(chuàng)建table表格的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
jQuery1.9.1針對(duì)checkbox的調(diào)整方法(prop)
這篇文章主要介紹了jQuery1.9.1針對(duì)checkbox的調(diào)整方法,用prop代替attr2014-05-05
bootstrap table實(shí)現(xiàn)iview固定列的效果實(shí)例代碼詳解
這篇文章主要介紹了bootstrap table實(shí)現(xiàn)iview固定列的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
jquery $.ajax各個(gè)事件執(zhí)行順序
jquery中各個(gè)事件執(zhí)行順序如下,使用jquery $.ajax的朋友可以參考下。2010-10-10
jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁面呈現(xiàn)的更為美觀,我們喜歡在奇偶行加上不同的顏色2012-02-02
Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動(dòng)態(tài)顯示特效的使用技巧,需要的朋友可以參考下2015-03-03
jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果,結(jié)合實(shí)例形式分析了jquery+css3實(shí)現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼
這篇文章主要介紹了基于HTML+CSS+JS實(shí)現(xiàn)增加刪除修改tab導(dǎo)航特效代碼的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-08-08

