如何計算到達某一天的剩余時間（以天、小時、分鍾和秒為單位）？

Question

我正在使用Moment.js檢索下一個星期五（ moment().day(5).format(); ），它成功運行並將2020-06-26T13:19:01+04:00打印到控制台

現在我想顯示一個倒計時計時器，以顯示距離該特定日期還剩多長時間，倒計時包括以天、小時、分鍾和秒為單位的剩余時間：

如何以天、小時、分鍾和秒為單位計算到達某個日期的剩余時間？

Answer 1

您可以使用moment.duration獲取持續時間 object ，它可以為您提供以天、小時、分鍾和秒為單位的值。 只需獲取天數並從持續時間中減去它們，然后獲取小時數並減去它們等等。

 function getRemaining (ts) { const now = moment(); const then = moment(ts); const diff = then.diff(now); const dur = moment.duration(diff); let parts = []; for (const part of ['days', 'hours', 'minutes', 'seconds']) { const d = dur[part](); dur.subtract(moment.duration(d, part)); parts.push(d); } return parts; } const ts = '2020-06-25 16:20'; const rem = getRemaining(ts); console.log (rem) setInterval(() => { const rem = getRemaining(ts); updateDom(rem) }, 100)

 .w { background: #5EC098; width: 64px; height: 64px; float: left; border-radius: 4px; margin: 4px; }.n { position: absolute; margin: 8px; background: rgba(0, 0, 0, .5); width: 48px; height: 48px; line-height: 48px; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script> <div class="w"> <div class="n" id="days"> </div> </div> <div class="w"> <div class="n" id="hours"> </div> </div> <div class="w"> <div class="n" id="minutes"> </div> </div> <div class="w"> <div class="n" id="seconds"> </div> </div> <script> function updateDom(vals) { let i=0; for (const part of ['days', 'hours', 'minutes', 'seconds']) { const ele = document.getElementById(part); ele.innerText = vals[i++]; } } </script>

Answer 2

設置有效的結束日期 首先，您需要設置一個有效的結束日期。 這應該是 JavaScript 的 Date.parse() 方法可以理解的任何格式的字符串。 例如：

const deadline = '2015-12-31';

短格式：

const deadline = '31/12/2015';

或者，長格式：

const deadline = 'December 31 2015';

這些格式中的每一種都允許您指定准確的時間和時區（或在 ISO 日期的情況下與 UTC 的偏移量）。 例如：

const deadline = 'December 31 2015 23:59:59 GMT+0200';

計算剩余時間下一步是計算剩余時間。 我們需要編寫一個 function ，它接受一個代表給定結束時間的字符串（如上所述）。 然后我們計算該時間與當前時間之間的差異。 看起來是這樣的：

 function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

首先，我們正在創建一個變量總計，以將剩余時間保持到截止日期。 Date.parse() function 將時間字符串轉換為以毫秒為單位的值。 這使我們可以將彼此相減兩次並獲得兩者之間的時間量。

const total = Date.parse(endtime) - Date.parse(new Date());

將時間轉換為可用格式現在我們要將毫秒轉換為天、小時、分鍾和秒。 讓我們以秒為例：

const seconds = Math.floor( (t/1000) % 60 );

讓我們分解這里發生的事情。

1. 將毫秒除以 1000 以轉換為秒：(t/1000)
2. 將總秒數除以 60 並獲取余數。 您不想要所有的秒數，只需要計算分鍾數后剩余的秒數： (t/1000) % 60
3. 將此向下舍入到最接近的整數。 這是因為您想要完整的秒數，而不是幾分之一秒： Math.floor( (t/1000) % 60 )

重復此邏輯以將毫秒轉換為分鍾、小時和天。

Output 時鍾數據作為可重用 Object

准備好天、小時、分鍾和秒后，我們現在可以將數據作為可重用的 object 返回：

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

這個 object 允許您調用 function 並獲取任何計算值。 以下是如何獲得剩余分鍾數的示例：

getTimeRemaining(deadline).minutes

方便，對吧？

..顯示時鍾並在到達零時停止

現在我們有一個 function 可以顯示剩余的天數、小時數、分鍾數和秒數，我們可以構建我們的時鍾。 首先，我們將創建以下 HTML 元素來保存我們的時鍾：

<div id="clockdiv"></div>

然后我們將編寫一個 function 來輸出我們新 div 中的時鍾數據：

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const timeinterval = setInterval(() => {
    const t = getTimeRemaining(endtime);
    clock.innerHTML = 'days: ' + t.days + '<br>' +
                      'hours: '+ t.hours + '<br>' +
                      'minutes: ' + t.minutes + '<br>' +
                      'seconds: ' + t.seconds;
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  },1000);
}

這個 function 有兩個參數。 這些是包含我們的時鍾的元素的 id，以及倒計時的結束時間。 在 function 內部，我們將聲明一個時鍾變量並使用它來存儲對時鍾容器 div 的引用。 這意味着我們不必一直查詢 DOM。 接下來，我們將使用setInterval每秒執行一次匿名 function。 這個 function 將執行以下操作：

計算剩余時間。 Output 剩余時間到我們的div。 如果剩余時間為零，請停止時鍾。

此時，唯一剩下的步驟就是像這樣運行時鍾：

initializeClock('clockdiv', deadline);

恭喜。 您現在只需 18 行 JavaScript 代碼就擁有了一個基本時鍾。

准備您的時鍾以供展示在設計時鍾樣式之前，我們需要稍微改進一下。

消除初始延遲，以便您的時鍾立即顯示。 使時鍾腳本更高效，這樣它就不會不斷地重建整個時鍾。 根據需要添加前導零。

移除初始延遲在時鍾中，我們使用 setInterval 每秒更新顯示。 這在大多數情況下都很好，除了在開始時會有一秒鍾的延遲。 為了消除這種延遲，我們必須在間隔開始之前更新一次時鍾。

讓我們將傳遞給 setInterval 的匿名 function 移動到它自己單獨的 function 中。 我們可以將此命名為 function updateClock。 在 setInterval 外調用 updateClock function 一次，然后在 setInterval 內再次調用。 這樣，時鍾就會毫無延遲地顯示出來。

在您的 JavaScript 中，替換此：

const timeinterval = setInterval(() => { ... },1000);

有了這個：

function updateClock(){
  const t = getTimeRemaining(endtime);
  clock.innerHTML = 'days: ' + t.days + '<br>' +
                    'hours: '+ t.hours + '<br>' +
                    'minutes: ' + t.minutes + '<br>' +
                    'seconds: ' + t.seconds;
  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
}

updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);

避免不斷重建時鍾我們需要使時鍾腳本更高效。 我們只想更新時鍾中的數字，而不是每秒重建整個時鍾。 實現這一點的一種方法是將每個數字放在一個跨度標記中，並且只更新這些跨度的內容。

這是 HTML：

<div id="clockdiv">
    Days: <span class="days"></span><br>
    Hours: <span class="hours"></span><br>
    Minutes: <span class="minutes"></span><br>
    Seconds: <span class="seconds"></span>
</div>

現在讓我們參考這些元素。 在定義時鍾變量的位置之后添加以下代碼

const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');

接下來，我們需要更改 updateClock function 以僅更新數字。 新代碼將如下所示：

function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    minutesSpan.innerHTML = t.minutes;
    secondsSpan.innerHTML = t.seconds;

    ...
}

添加前導零 現在時鍾不再每秒重建，我們還有一件事要做：添加前導零。 例如，不是讓時鍾顯示 7 秒，而是顯示 07 秒。 一種簡單的方法是在數字的開頭添加一個字符串“0”，然后切掉最后兩位數字。

例如，要將前導零添加到“秒”值，您可以更改：

secondsSpan.innerHTML = t.seconds;

對此：

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

如果您願意，也可以在分鍾和小時中添加前導零。 如果你已經走到這一步，恭喜你。 您的時鍾現在可以顯示了。

注意：您可能需要在 CodePen 中單擊“重新運行”才能開始倒計時。