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í)功能(無視頁(yè)面關(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)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04jQuery簡(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-04jquery Form輕松實(shí)現(xiàn)文件上傳
這篇文章主要介紹了jquery Form輕松實(shí)現(xiàn)文件上傳的相關(guān)過程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過 jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷,但是當(dāng)不符合條件時(shí),怎么跳出當(dāng)前循環(huán),解決方法如下,需要的朋友可以參考下2014-06-06jQuery使用before()和after()在元素前后添加內(nèi)容的方法
這篇文章主要介紹了jQuery使用before()和after()在元素前后添加內(nèi)容的方法,實(shí)例分析了jQuery中before()和after()方法添加內(nèi)容的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03