JavaScript實現限時秒殺功能
阿新 • • 發佈:2021-08-27
本文例項為大家分享了實現限時秒殺功能的具體程式碼,供大家參考,具體內容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="box"> <div id="d"></div> <!-- 剩餘的天數 --> <div id="h"></div> <!-- 剩餘的小時 --> <div id="m"></div> <!-- 剩餘的分鐘 --> <div id="s"></div> <!-- 剩餘的秒數 --> </div> <script> //設定秒殺結束時間 var endTime = new Date('2021-10-22 18:51:59'),endSeconds = endTime.getTime(); //定義變數儲存剩餘的時間 var d = h = m = s = 0; //設定定時器,實現限時秒殺效果 var id = setInterval(seckill,1000); function seckill(){ var nowTime = new Date(); //獲取當前時間 //獲取時間差,單位為秒 var remaining = parseInt((endSeconds - nowTime.getTime())/1000); if(remaining>0){//判斷秒殺是否過期 //計算剩餘天數(除以60*60*24取整,獲取剩餘的天數) http://www.cppcns.comd=parseInt(remaining / 86400); //計算剩餘小時(除以60*60轉換為小時,與24小時取模,獲取剩餘的小時) h=parseInt((remaining / 3600) % 24); //計算剩餘分鐘(除以60轉為分鐘,與60取模,獲取剩餘的分鐘) m=parseInt((remaining / 60) % 60); //計算剩餘秒(與60取模,獲取剩餘的秒數) s=parseInt(remaining % 60); //統一利用兩位數表示剩餘的天、小時、分鐘、秒 d = d<10 ? '0' + d : d; h = h<10 ? '0' + h : h; m = m<10 ? '0' + m : m; s = s<10 ? '0' + s : s; www.cppcns.com}else{ clearInterval(id);//秒殺過期,取消定時器 http://www.cppcns.com d = h = m = s ='00'; } //將剩餘的天,小時,分鐘和秒顯示到指定的中 document.getElementById('d').innerHTML = d + '天'; document.getElementById('h').innerHTML = h + '時'; document.getElementById('m').innerHTML = m + '分'; document.getElementById('s').innerHTML = s + '秒'; } </script> </body> </html>
再為大家分享一個實現簡單的限時秒殺案例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.product{ border: 3px solid orange; display: inline-block; margin-left: 400px; width: 400px; }
.red{ color: red; font-http://www.cppcns.comsize: 25px; }
</style>
</head>
<body>
<div class="product" style="text-align: center;">
<img src="案例-百葉窗/images/0.jpg" alt="Script實現限時秒殺功能" width="150"/>
<p>絕世好男人</p>
<span>原價:<del>99億</del></span>
<br/>
<span>現價:<span class="red">100塊</span></span>
<br/>
<span>距離搶購結束還有:</span><span id="time"></span>
</div>
<script>
var stopTime = new Date(3000,11,14,0);
var nowTime = new Date();
var jianGe = (stopTime-nowTime)/1000;
var day = Math.floor(jianGe/60/60/24);
var hour = Math.floor(jianGe/60/60%24);
var min = Math.floor(jianGe/60%60);
var sec = Math.floor(jianGe%60);
var showTime = day+'天'+hour+'小時'+min+'分鐘'+sec+'秒';
document.getElementById('time').innerText = showTime;
//定時器:每隔多長事件執行一次某函式
//setInterval(func,ms)
var timer = setInterval(function () {
var nowTime = new Date();
var jianGe = (stopTime-nowTime)/1000;
http://www.cppcns.com var day = Math.floor(jianGe/60/60/24);
var hour = Math.floor(jianGe/60/60%24);
var min = Math.floor(jianGe/60%60);
var sec = Math.floor(jianGe%60);
var showTime = day+'天'+hour+'小時'+min+'分鐘'+sec+'秒';
document.getElementById('time').innerText = showTime;
if(day==0&&hour==0&&min==0&&sec==0){
//關閉定時器
clearInterval(timer);
}
},1000);
</script>
</body>
</html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。