jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼
本章節(jié)介紹一段代碼實(shí)例,此代碼能夠判斷當(dāng)前日期是否已經(jīng)倒計(jì)時(shí)結(jié)束,此代碼中并沒有倒計(jì)時(shí)效果,只是判斷是否倒計(jì)時(shí)完成,比如購(gòu)物網(wǎng)站優(yōu)惠期限等,雖然實(shí)際應(yīng)用中,很少會(huì)出現(xiàn)類似的代碼,不過希望能夠給瀏覽者帶來一定的啟示作用。
代碼如下:
function done(){
var str=$('#end').text();
var out=str.match(/\d+/g);
console.log(out);
var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]);
console.log(h+'#'+m+'#'+s);
var calc=h*3600+m*60+s;
console.log(calc);
if(calc==0){
//code
}
else{
console.log('等待..');
}
var t=setTimeout('done()',1000);
}
done();
上面只是代碼片段,不能夠演示,下面介紹一下它的實(shí)現(xiàn)過程。
一.代碼注釋:
1.function done(){},此函數(shù)實(shí)現(xiàn)判斷倒計(jì)時(shí)結(jié)束效果。
2.var str=$('#end').text(),獲取指定元素中的文本內(nèi)容,本代碼中應(yīng)該倒計(jì)時(shí)當(dāng)前時(shí)間.
3.var out=str.match(/\d+/g),獲取時(shí)間日期中數(shù)字的數(shù)組。
4.var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]),分別獲取小時(shí)、分鐘和秒。
5.var calc=h*3600+m*60+s,轉(zhuǎn)換成秒。
6.if(calc==0){//code},判斷倒計(jì)時(shí)是否結(jié)束,然后指定相應(yīng)的操作。
7.var t=setTimeout('done()',1000),每隔一秒執(zhí)行一次判斷函數(shù)。
8.done(),執(zhí)行此函數(shù)。
jquery實(shí)現(xiàn)倒計(jì)時(shí)代碼如下所示:
$(function(){
var tYear = ""; //輸入的年份
var tMonth = ""; //輸入的月份
var tDate = ""; //輸入的日期
var iRemain = ""; //開始和結(jié)束之間相差的毫秒數(shù)
var sDate = ""; //倒計(jì)的天數(shù)
var sHour = ""; //倒計(jì)時(shí)的小時(shí)
var sMin = ""; //倒計(jì)時(shí)的分鐘
var sSec = ""; //倒計(jì)時(shí)的秒數(shù)
var sMsec = ""; //毫秒數(shù)
//通用工具函數(shù),在個(gè)位數(shù)上加零,根據(jù)傳的N的參數(shù),來設(shè)前面加幾個(gè)零
function setDig(num,n){
var str = ""+num;
while(str.length<n){
str="0"+str
}
return str;
}
//獲得相差的天,小時(shí),分鐘,秒
function getdate(){
//創(chuàng)建開始時(shí)間和結(jié)束時(shí)間的日期對(duì)象
var oStartDate = new Date();
var oEndDate = new Date();
//獲取文本框的值
tYear = $("#tyear").val();
tMonth = $("#tmonth").val();
tDate = $("#tdate").val();
//設(shè)置結(jié)束時(shí)間
oEndDate.setFullYear(parseInt(tYear));
oEndDate.setMonth(parseInt(tMonth)-1);
oEndDate.setDate(parseInt(tDate));
oEndDate.setHours(0);
oEndDate.setMinutes(0);
oEndDate.setSeconds(0);
//求出開始和結(jié)束時(shí)間的秒數(shù)(除以1000)
iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;
//總的秒數(shù)除以一天的秒數(shù),再取出整數(shù)部分,就得出有多少天。
sDate = setDig(parseInt(iRemain/(60*60*24)),3);
//總的秒數(shù)除以一天的秒數(shù),然后取其中的余數(shù),就是把整數(shù)天扣除之后,剩下的總秒數(shù)。
iRemain %= 60*60*24;
//剩下的總秒數(shù)除以一個(gè)小時(shí)的秒數(shù),再取整數(shù)部分,就是有多少小時(shí)。
sHour = setDig(parseInt(iRemain/(60*60)),2)
//剩下的總秒數(shù)除以一個(gè)小時(shí)的秒數(shù),再取其余數(shù),這個(gè)余數(shù),就是扣除小時(shí)這后,剩下的總秒數(shù)。
iRemain %= 60*60;
//剩下的總秒數(shù)除以一分鐘的秒數(shù),再取其整數(shù)部分,就是有多少分鐘。
sMin = setDig(parseInt(iRemain/60),2)
//剩下的總秒數(shù)除以一分鐘的秒數(shù),再取其余數(shù),這個(gè)余數(shù),就是扣除分鐘之后,剩下的總秒數(shù)。
iRemain%=60;
//剩下的秒數(shù)
sSec = setDig(iRemain,2);
//毫秒數(shù)
sMsec = sSec*100;
}
//更改顯示的時(shí)間
function updateShow(){
$(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);
$(".count span").each(function(index, element) {
if(index==0){
$(this).text(sDate);
}else if(index==1){
$(this).text(sHour);
}else if(index == 2){
$(this).text(sMin);
}else if(index == 3){
$(this).text(sSec);
}else if(index == 4){
$(this).text(sMsec);
}
});
}
//每一秒執(zhí)行一次時(shí)間更新
function autoTime(){
getdate();
//如果小于零,清除調(diào)用自己,并且返回
if(iRemain<0){
clearTimeout(setT);
return;
}
updateShow();
var setT = setTimeout(autoTime,1000);
}
//點(diǎn)擊按鈕開始計(jì)時(shí)
$("button").click(function(){
autoTime();
})
})
記錄需要注意的地方:
1.取模運(yùn)算:
iRemain %= 60*60*24;
就是返回余數(shù),在這個(gè)實(shí)例中的余數(shù),就是把整數(shù)拿走后,剩下的秒數(shù)。
2.工具函數(shù) setDig(num,n)
可以根據(jù)傳入的參數(shù),自動(dòng)在傳入的數(shù)字前加零
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- jQuery簡(jiǎn)單倒計(jì)時(shí)效果完整示例
- 基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面關(guān)閉)
- jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
- jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法詳解
- 基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果
- jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例小結(jié)
- jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼,具備顯示文本,Div,Table,Html等功能.涉及jQuery針對(duì)鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04
jQuery簡(jiǎn)單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊的代碼,非常的好用,這里推薦給大家,有需要的小伙伴參考下。2015-04-04
jquery Form輕松實(shí)現(xiàn)文件上傳
這篇文章主要介紹了jquery Form輕松實(shí)現(xiàn)文件上傳的相關(guān)過程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過 jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷,但是當(dāng)不符合條件時(shí),怎么跳出當(dāng)前循環(huán),解決方法如下,需要的朋友可以參考下2014-06-06
jQuery使用before()和after()在元素前后添加內(nèi)容的方法
這篇文章主要介紹了jQuery使用before()和after()在元素前后添加內(nèi)容的方法,實(shí)例分析了jQuery中before()和after()方法添加內(nèi)容的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03

