javascriptで今年の残り日時(カウントダウン)の表示を行なう

javascriptのお勉強に今年の残り日時(カウントダウン)を作ったときのメモ

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>カウントダウン</title>
</head>
<body>
  <h1 id="days" style="text-align:center;"></h1>
  <script>
  function time () {
    const now = new Date()
    // 来年の1月1日
    const firstDay = new Date(now.getFullYear() + 1, 0, 1)
    // 秒数差
    const diff = (firstDay.getTime() - now.getTime()) / 1000
    // 日時の計算と端数切り捨て
    const daysLeft = Math.floor(diff / (24 * 60 * 60))
    const hoursLeft = (Math.floor(diff / (60 * 60))) % 24
    let minitesLeft = (Math.floor(diff / 60)) % 60
    let secondsLeft = Math.floor(diff) % 60
    // 二桁表示
    minitesLeft = ('0' + minitesLeft).slice(-2)
    secondsLeft = ('0' + secondsLeft).slice(-2)
    // 出力
    document.getElementById('days').innerHTML = ('今年の残り時間は' + daysLeft + '日' + hoursLeft + '時間' + minitesLeft + '分' + secondsLeft + '秒です')
  }
  time()
  setInterval('time()', 500)
  </script>
</body>
</html>

こんな感じになる。

メモ

setInterval('time()',500);

1秒ごとの表示だと二桁表示の処理のせいか、たまに１秒スキップされてしまうので、0.5秒ごとの表示にしている。