本文實例講述了JS秒殺倒計時功能。分享給大家供大家參考,具體如下:
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="miaosha();">
<p class="tit_right" >
<span id="d" >00</span>天
<span id="h" >00</span>時
<span id="m" >00</span>分
<span id="s" >00</span>秒
</p>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var timer = null;
// 秒殺函數
function miaosha(year, month, day, hour, minute, second) {
// 剩余時間:設定的-當前的
var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date());
// parseInt()返回一個整數。得出剩余的時分秒
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);
// 結束的時候
if (seconds < 0) {
alert("快點!");
clearTimeout(timer);
}
else {
// 格式的轉化
days = fix(days, 2);
hours = fix(hours, 2);
minutes = fix(minutes, 2);
seconds = fix(seconds, 2);
// 遞歸調用 注意:比當前時間大!
timer = setTimeout("miaosha(2019,09,05,10,56,00)", 1000); //// 設置開始的時間
// 設置時分秒
document.getElementById("h").innerHTML = hours;
document.getElementById("m").innerHTML = minutes;
document.getElementById("s").innerHTML = seconds;
document.getElementById("d").innerHTML = days;
}
}
//fix函數:數字加0
function fix(num, length) {
console.log(num);
// 數字轉化為字符串 進行拼接
return num.toString().length<length?'0'+num:num;
}
</script>
顯示

PS:這里再為大家推薦幾款時間及日期相關工具供大家參考使用:
在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao
在線日期/天數計算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期天數差計算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具:
http://tools.jb51.net/code/unixtime
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。