jquery實現的判斷倒數計時是否結束程式碼_jquery
本章節介紹一段程式碼實例,此程式碼能夠判斷當前日期是否已經倒數結束,此程式碼中並沒有倒數效果,只是判斷是否倒數完成,例如購物網站優惠期限等,雖然實際應用中,很少會出現類似的程式碼,不過希望能為瀏覽者帶來一定的啟示作用。
程式碼如下:
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();
上面只是程式碼片段,不能夠演示,下面介紹一下它的實作過程。
一.程式碼註解:
1.function done(){},此函數實現判斷倒數結束效果。
2.var str=$('#end').text(),取得指定元素中的文字內容,本程式碼應該倒數當前時間.
3.var out=str.match(/d+/g),取得時間日期中數字的陣列。
4.var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]),分別取得小時、分鐘和秒。
5.var calc=h*3600+m*60+s,轉換成秒。
6.if(calc==0){//code},判斷倒數計時是否結束,然後指定對應的操作。
7.var t=setTimeout('done()',1000),每隔一秒執行判斷函數一次。
8.done(),執行此函數。
jquery實作倒數碼如下圖所示:
$(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate = ""; //倒计的天数 var sHour = ""; //倒计时的小时 var sMin = ""; //倒计时的分钟 var sSec = ""; //倒计时的秒数 var sMsec = ""; //毫秒数 //通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零 function setDig(num,n){ var str = ""+num; while(str.length<n){ str="0"+str } return str; } //获得相差的天,小时,分钟,秒 function getdate(){ //创建开始时间和结束时间的日期对象 var oStartDate = new Date(); var oEndDate = new Date(); //获取文本框的值 tYear = $("#tyear").val(); tMonth = $("#tmonth").val(); tDate = $("#tdate").val(); //设置结束时间 oEndDate.setFullYear(parseInt(tYear)); oEndDate.setMonth(parseInt(tMonth)-1); oEndDate.setDate(parseInt(tDate)); oEndDate.setHours(0); oEndDate.setMinutes(0); oEndDate.setSeconds(0); //求出开始和结束时间的秒数(除以1000) iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000; //总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。 sDate = setDig(parseInt(iRemain/(60*60*24)),3); //总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。 iRemain %= 60*60*24; //剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。 sHour = setDig(parseInt(iRemain/(60*60)),2) //剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。 iRemain %= 60*60; //剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。 sMin = setDig(parseInt(iRemain/60),2) //剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。 iRemain%=60; //剩下的秒数 sSec = setDig(iRemain,2); //毫秒数 sMsec = sSec*100; } //更改显示的时间 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); } }); } //每一秒执行一次时间更新 function autoTime(){ getdate(); //如果小于零,清除调用自己,并且返回 if(iRemain<0){ clearTimeout(setT); return; } updateShow(); var setT = setTimeout(autoTime,1000); } //点击按钮开始计时 $("button").click(function(){ autoTime(); }) })
記錄要注意的地方:
1.取模運算:
iRemain %= 60*60*24;
就是回傳餘數,在這個實例中的餘數,就是把整數拿走後,剩下的秒數。
2.工具函數 setDig(num,n)
可以依照傳入的參數,自動在傳入的數字前面加零

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

將矩陣電影特效帶入你的網頁!這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效,只需選擇一張圖片,插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧,非常有趣! 工作原理 插件將圖片加載到畫布上,讀取像素和顏色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域,並利用jQuery計算每個區域的平均顏色。然後,使用

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫,它基於jQuery構建,並提供許多配置選項來設置輪播。 如今,圖片輪播已成為網站必備功能——一圖胜千言! 決定使用圖片輪播後,下一個問題是如何創建它。首先,您需要收集高質量、高分辨率的圖片。 接下來,您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計,因此使用此庫構建的輪播可以適應任何

數據集對於構建API模型和各種業務流程至關重要。這就是為什麼導入和導出CSV是經常需要的功能。在本教程中,您將學習如何在Angular中下載和導入CSV文件
