JavaScriptだけでサーバー時間を取得したタイマーサンプル

あなたのパソコンまたはスマートフォンの設定時刻

サーバーの設定時刻

ロサンゼルスオリンピック開会式まで

HTML

<p>あなたのパソコンまたはスマートフォンの設定時刻<br><span id="client"></span></p>
<p>サーバーの設定時刻<br><span id="server"></span></p>
<p>ロサンゼルスオリンピック開会式まで <br><span id="los2028"></span></p>

JavaScript

var client = document.getElementById('client');
var server = document.getElementById('server');
var los2028 = document.getElementById('los2028');
var request = new XMLHttpRequest();
var limitDate = new Date('2021/07/23 00:00');
var timer;
client.textContent = new Date();
request.open('HEAD', window.location.href, true);
request.send();
request.onreadystatechange = function() {
  if (this.readyState === 4) {
    var serverDate = new Date(request.getResponseHeader('Date'));
    server.textContent = serverDate;
    var rTime = (limitDate - serverDate) / 1000;
    var addZero = function(n) {
      return ('0' + n).slice(-2);
    }
    var gDate = function(rTime) {
      var rDay = Math.floor(rTime / (60 * 60 * 24));
      var rHour = Math.floor(rTime / (60 * 60)) - (rDay * 24);
      var rMin = addZero(Math.floor(rTime / (60)) - (rDay * 24 * 60) - (rHour * 60));
      var rSec = addZero(Math.floor(rTime) - (rDay * 24 * 60 * 60) - (rHour * 60 * 60) - (rMin * 60));
      rDay = rDay ? rDay + '日' : '';
      rHour = rHour ? rHour + '時間' : '';
      rMin = rMin !== '00' ? rMin + '分' : '';
      los2028.textContent = rDay + rHour + rMin + rSec + '秒';
    }
    gDate(rTime);
    timer = setInterval(function() {
      if (rTime > 0) {
        gDate(rTime);
        rTime--;
      } else {
        clearInterval(timer);
        los2028.textContent = '開催中';
      }
    }, 1000);
  }
}