分享最簡單的JavaScript倒數程式碼（附完整程式碼）
- yulia原創
- 2018-10-15 10:30:5422904瀏覽
工作中常常需要在頁面中設定倒數計時，那你知道JS倒數計時程式碼怎麼寫嗎？這篇文章就給大家分享一個最簡單的JS倒數代碼，以及詳細的倒數JS代碼的思路，,有一定的參考價值，有興趣的朋友可以看看。
範例：設定一個截止日期，顯示剩餘時間。例如雙十一馬上來了，商家搞活動，可以用JS倒數計時顯示距離活動結束還有多久。具體代碼如下：
HTML部分：
<body onload = "countTime()">
<div>
<span id="day"></span>
<span id="hour"></span>
<span id="minute"></span>
<span id="second"></span>
</div>
</body>給四個 標籤，用於顯示剩餘的天數，小時，分鐘和秒
# JavaScript部分：
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date("2018-10-31 0:0:0");
var end = endDate.getTime();
//获取截止时间和当前时间的时间差
var leftTime = end-now;
//定义变量 d,h,m,s分别保存天数，小时，分钟，秒
var d,h,m,s;
//判断剩余天数，时，分，秒
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
//将时间赋值到div中
document.getElementById("day").innerHTML = d+"天";
document.getElementById("hour").innerHTML = h+"时";
document.getElementById("minute").innerHTML = m+"分";
document.getElementById("second").innerHTML = s+"秒";
//递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime,1000);
}
</script>倒數計時JS程式碼的想法：
1、用date = new Date() 取得目前時間
2、設定截止時間endDate = new Date( "2018-10-31 0:0:0")
3、取得時間差 leftTime = end-now
4、定義變數 d,h,m,s，以if函數判斷剩餘的天數與時分秒
5、用innerHTML將時間賦值到div中
6、遞迴每秒呼叫countTime函數的方法，顯示動態時間效果
效果如圖：
以上和大家分享了一個簡單的JS倒數程式碼，詳細講解了JS倒數程式碼的思路，工作中可以直接拿去使用，比較簡單，初學者可以自己動手嘗試，看看能不能達到倒數計時的效果，希望這篇文章對你有幫助！
相關影片教學推薦：JavaScript影片教學
以上是分享最簡單的JavaScript倒數程式碼（附完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn