JS秒殺倒計(jì)時(shí)功能完整實(shí)例【使用jQuery3.1.1】
本文實(shí)例講述了JS秒殺倒計(jì)時(shí)功能。分享給大家供大家參考,具體如下:
代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="miaosha();"> <p class="tit_right" style=""> <span id="d" style="">00</span>天 <span id="h" style="">00</span>時(shí) <span id="m" style="">00</span>分 <span id="s" style="">00</span>秒 </p> </body> </html> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var timer = null; // 秒殺函數(shù) function miaosha(year, month, day, hour, minute, second) { // 剩余時(shí)間:設(shè)定的-當(dāng)前的 var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date()); // parseInt()返回一個(gè)整數(shù)。得出剩余的時(shí)分秒 var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); var seconds = parseInt(leftTime / 1000 % 60, 10); // 結(jié)束的時(shí)候 if (seconds < 0) { alert("快點(diǎn)!"); clearTimeout(timer); } else { // 格式的轉(zhuǎn)化 days = fix(days, 2); hours = fix(hours, 2); minutes = fix(minutes, 2); seconds = fix(seconds, 2); // 遞歸調(diào)用 注意:比當(dāng)前時(shí)間大! timer = setTimeout("miaosha(2019,09,05,10,56,00)", 1000); //// 設(shè)置開始的時(shí)間 // 設(shè)置時(shí)分秒 document.getElementById("h").innerHTML = hours; document.getElementById("m").innerHTML = minutes; document.getElementById("s").innerHTML = seconds; document.getElementById("d").innerHTML = days; } } //fix函數(shù):數(shù)字加0 function fix(num, length) { console.log(num); // 數(shù)字轉(zhuǎn)化為字符串 進(jìn)行拼接 return num.toString().length<length?'0'+num:num; } </script>
顯示
PS:這里再為大家推薦幾款時(shí)間及日期相關(guān)工具供大家參考使用:
在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao
在線日期/天數(shù)計(jì)算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期天數(shù)差計(jì)算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具:
http://tools.jb51.net/code/unixtime
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
- js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- javascript時(shí)間排序算法實(shí)現(xiàn)活動(dòng)秒殺倒計(jì)時(shí)效果
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
- C#結(jié)合JavaScript實(shí)現(xiàn)秒殺倒計(jì)時(shí)的方法
- javascript 實(shí)現(xiàn) 秒殺,團(tuán)購 倒計(jì)時(shí)展示的記錄 分享
- js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果
相關(guān)文章
struts2+jquery組合驗(yàn)證注冊(cè)用戶是否存在
這篇文章主要介紹了使用struts2+jquery如何驗(yàn)證注冊(cè)用戶是否存在,需要的朋友可以參考下2014-04-04【經(jīng)典源碼收藏】jQuery實(shí)用代碼片段(篩選,搜索,樣式,清除默認(rèn)值,多選等)
這篇文章主要介紹了jQuery實(shí)用代碼片段,包括篩選,搜索,樣式,清除默認(rèn)值,多選等多種功能.具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動(dòng)特效
本文是作者學(xué)習(xí)jQuery之后練手之作,兼容各大瀏覽器,非常的精美實(shí)用,這里放出來給小伙伴們,有需要的直接拿走,別跟我客氣^_^2014-11-11jQuery實(shí)現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法,涉及jQuery事件響應(yīng)及針對(duì)頁面元素屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能
本文通過實(shí)例代碼給大家分享了jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能,需要的朋友參考下吧2018-01-01jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼
本篇文章主要介紹了js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03jquery分析文本里url或郵件地址為真實(shí)鏈接的方法
這篇文章主要介紹了jquery分析文本里url或郵件地址為真實(shí)鏈接的方法,涉及jQuery正則匹配與替換的相關(guān)技巧,需要的朋友可以參考下2015-06-06jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07