溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JavaScript怎樣實現限時秒殺功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
具體內容如下
<!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取整，獲取剩余的天數）
d=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;
}else{
clearInterval(id);//秒殺過期，取消定時器
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>
再為大家分享一個JS實現簡單的限時秒殺案例：
<!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-size: 25px; }
</style>
</head>
<body>
<div class="product" >
<img src="jquery案例-百葉窗/images/0.jpg" alt="" 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,0,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;
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>關于“JavaScript怎樣實現限時秒殺功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
