JS實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能(動(dòng)態(tài)設(shè)置秒殺時(shí)間)
一年一度的雙十二如期而至,今天的你買(mǎi)買(mǎi)買(mǎi)了嗎,下面小編給大家分享一個(gè)動(dòng)態(tài)秒殺倒計(jì)時(shí)功能。
效果圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="noStart">活動(dòng)未開(kāi)始</div> <div class="div1" id="startNow" style="display: none;">開(kāi)始購(gòu)買(mǎi)</div> <div class="div2" id="stopNow" style="display: none;">活動(dòng)結(jié)束</div> <div> <span class="content"></span> <span class="botHours"></span>時(shí) <span class="botMIn"></span>分 <span class="botSecond"></span>秒 </div> </body> </html> <script src="js/jquery.min.js"></script> <script> $(function() { fn() function fn() { var timer = setInterval(function() { var start = '2019/03/13 00:00:00'; var StartTime = new Date(start); var NowTime = new Date(); var day = NowTime.getDate(); var month = NowTime.getMonth() + 1; var year = NowTime.getFullYear(); var tw = year + '/' + month + '/' + day + ' 09:00:00'; var ei = year + '/' + month + '/' + day + ' 10:00:00'; var tw1 = year + '/' + month + '/' + day +' 14:00:00'; var ei1 = year + '/' + month + '/' + day +' 15:00:00'; tw = new Date(tw).getTime(); ei = new Date(ei).getTime(); tw1 = new Date(tw1).getTime(); ei1 = new Date(ei1).getTime(); var EndTime = ''; if(NowTime < StartTime) { EndTime = StartTime; $('#stopNow').css('display', 'none'); $('#startNow').css('display', 'none'); $('#noStart').css('display', 'block'); $(".content").html("距離活動(dòng)開(kāi)始") } else { if(NowTime < tw) { EndTime = tw; $('#stopNow').css('display', 'none'); $('#startNow').css('display', 'none'); $('#noStart').css('display', 'block'); $(".content").html("距離活動(dòng)開(kāi)始剩余") } else if(NowTime >= tw && NowTime < ei) { EndTime = ei; $('#stopNow').css('display', 'none'); $('#startNow').css('display', 'block'); $('#noStart').css('display', 'none'); $(".content").html("距離活動(dòng)結(jié)束剩余") }else if(NowTime < tw1){ EndTime =tw1; $('#stopNow').css('display', 'none'); $('#startNow').css('display', 'none'); $('#noStart').css('display', 'block'); $(".content").html("距離活動(dòng)開(kāi)始剩余") } else if(NowTime >= tw1 && NowTime < ei1) { EndTime = ei1; $('#stopNow').css('display', 'none'); $('#startNow').css('display', 'block'); $('#noStart').css('display', 'none'); $(".content").html("距離活動(dòng)結(jié)束剩余") }else if(NowTime >= ei1) { EndTime = tw + 24 * 60 * 60 * 1000; $('#stopNow').css('display', 'block'); $('#startNow').css('display', 'none'); $('#noStart').css('display', 'none'); $(".content").html("距離活動(dòng)開(kāi)始剩余") } } console.log(EndTime) var t = EndTime - NowTime; if(t < 1000) { window.location.reload(); clearInterval(timer); timer = null; return false; } var d = 0; var h = 0; var m = 0; var s = 0; if(t >= 0) { d = Math.floor((t / 1000 / 3600) / 24); h = Math.floor((t / 1000 / 3600) % 24); m = Math.floor((t / 1000 / 60) % 60); s = Math.floor(t / 1000 % 60); if(d < 10) { d = "0" + d; } if(h < 10) { h = "0" + h; } if(m < 10) { m = "0" + m; } if(s < 10) { s = "0" + s; } $('.botHours').html(h); $('.botMIn').html(m); $('.botSecond').html(s); } }, 1000) } }); </script>
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能(動(dòng)態(tài)設(shè)置秒殺時(shí)間),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- JavaScript仿京東秒殺倒計(jì)時(shí)
- js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
- JS腳本實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)秒殺點(diǎn)擊
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
- 如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)功能
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
- JavaScript實(shí)現(xiàn)京東秒殺效果
相關(guān)文章
(推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib
(推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib...2007-04-04js實(shí)現(xiàn)不提示直接關(guān)閉網(wǎng)頁(yè)窗口
本文主要介紹了js實(shí)現(xiàn)不提示直接關(guān)閉網(wǎng)頁(yè)窗口的方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-03-03JS實(shí)現(xiàn)用戶(hù)注冊(cè)時(shí)獲取短信驗(yàn)證碼和倒計(jì)時(shí)功能
在用戶(hù)注冊(cè)時(shí),通常需要短信驗(yàn)證碼,而且為了交互效果,也需要增加倒計(jì)時(shí)。該如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能呢?下面小編給大家分享JS實(shí)現(xiàn)用戶(hù)注冊(cè)時(shí)獲取短信驗(yàn)證碼和倒計(jì)時(shí)的代碼,一起看看吧2016-10-10C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記
這篇文章主要給大家分享了一位C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03只有 20 行的 JavaScript 模板引擎實(shí)例詳解
這篇文章主要介紹了只有 20 行的 JavaScript 模板引擎,結(jié)合實(shí)例形式分析了JavaScript 模板引擎實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05解決微信小程序調(diào)用moveToLocation失效問(wèn)題【超簡(jiǎn)單】
這篇文章主要介紹了解決微信小程序調(diào)用moveToLocation失效問(wèn)題,解決方法超級(jí)簡(jiǎn)單,需要的朋友可以參考下2019-04-04javascript中的五種基本數(shù)據(jù)類(lèi)型
在javascript中申明變量使用的關(guān)鍵字都是var,這點(diǎn)與其他的編程語(yǔ)言不盡相同,但是javascript亦含有五種基本的數(shù)據(jù)類(lèi)型(也可以說(shuō)是簡(jiǎn)單數(shù)據(jù)類(lèi)型),它們分別是:Undefined,Null,Boolean,Number和String。還含有一種復(fù)雜數(shù)據(jù)類(lèi)型—Object。這里我們不談復(fù)雜數(shù)據(jù)類(lèi)型2015-08-08