[JavaScript][PHP] Różnica w odmierzaniu czasu, jak znowelować lub zsynchronizować Opcje

[shpaque]

witam serdecznie, napisałem coś na szybko:

[HTML] pobierz, plaintext 
<p id="php"></p>
<p id="js"></p>
 
<script>
    var jsTime = new Date();
    var phpTime = new Date("<?php echo date('c'); ?>");
    document.getElementById("php").innerHTML = 'Czas z serwera PHP: ' + phpTime;
    document.getElementById("js").innerHTML = 'Czas przeglądarki (JS): ' + jsTime;
</script>
[HTML] pobierz, plaintext 

jest to sfiddlowane tu: https://www.tehplayground.com/CkYfUInJPBESsPjc

generalnie u mnie w obecnym momencie pokazuje ze czas z serwera jest ok 13 sekund opozniony wzgledem przegladarki. Pytanie - czy daj się (i jak) to zniwelować a najlepiej zrobić jakiś button ze skryptem, który zaktualizuje czas w przeglądarce / systemie względem czasu PHP..?

[shpaque]

ok zrobilem to sobie juz, teraz mam zagwostke przy tym skrypcie - niby odmieza czas:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function showTime(text, time, id) {
  var t = setInterval(function() {
    var updateDate = new Date(time);
    var hours = Math.floor((updateDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((updateDate % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((updateDate % (1000 * 60)) / 1000, 2);
    var miliseconds = Math.floor(updateDate);
 
    var content = text + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + '<br><small>(w ms: <strong>' + miliseconds + '</strong>)</small>';
 
    document.getElementById(id).innerHTML = content;
  }, 1000);
}
</script>
 
<div class="row align-self-center" style="margin-top: 15px;">
  <div class="col-md-4 text-center align-self-center">
    <p id="serverTime" data-toggle="tooltip" data-title="To czas bazowy (serwera), na podstawie którego działa aplikacja Test"><script>showTime('Czas <strong>serwera</strong>: ', '<?php echo date('c'); ?>', 'serverTime');</script></p>
  </div>
  <div class="col-md-4 text-center align-self-center">
    <p id="systemTime" data-toggle="tooltip" data-title="To wskazanie czasu Twojego systemu i przeglądarki. Jeśli różni się choćby o parę sekund – oznacza to, że Twoje urządzenie ma źle ustawiony zegar"><script>showTime('Czas <strong>Twojego systemu</strong>: ', new Date(), 'systemTime');</script></p>
  </div>
  <div class="col-md-4 text-center align-self-center">
    <p id="correctTime" data-toggle="tooltip" data-title="System automatycznie koryguje różnicę casu Twojego systemu (powinien wskazywać identyczny czas jak czas serwera) – dzięki temu możesz bezpiecznie wziąć udział w teście">
      <script>
      var srvTime = new Date('<?php echo date('c'); ?>');
      var sysTime = new Date();
      var correction = sysTime - srvTime;
      var corTime = new Date(Date.now() - correction);
 
      showTime('Czas <strong>po korekcie</strong>: ', corTime, 'correctTime');
 
      if (correction > 5000 || correction < -5000) {
        document.getElementById('systemTime').innerHTML = document.getElementById('systemTime').innerHTML + '<br><big style="margin-top: 5px;"><red><strong>MASZ ŹLE USTAWIONY ZEGAR SYSTEMOWY!</strong></red></big>';
      }
      </script>
    </p>
  </div>
</div>
[HTML] pobierz, plaintext 

i pokazuje oraz niweluje roznicę, ale w obecnym stanie:
- nie zmienia się co sekundę (nie "chodzi")
- jak zmienię "var updateDate = new Date(time);" na "var updateDate = new Date(Date(time));" to chodzi ale wszedzie pokazuje czas serwera,
- jak zmienię "var updateDate = new Date(time);" na "var updateDate = new Date.now(time); chodzi ale wszedzie pokazuje zegar systemowy

przyklad na maku przy skrypcie załączonym powyżej (zegar stoi ale po wejsciu na strone pokazuje aktualny czas pociagniety przy renderze strony):

[XML] pobierz, plaintext 
Czas serwera: 10:29:44
(w ms: 1590229784000)
 
Czas Twojego systemu: 10:29:44
(w ms: 1590229784735)
 
Czas po korekcie: 10:29:44
(w ms: 1590229784000)
[XML] pobierz, plaintext 

@EDIT

Już sobie poradziłem. W ten sposób:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function showTime(text, time, id) {
  var newTime = new Date(time);
  var interval = 0;
 
  var t = setInterval(function() {
    var updateDate = new Date(newTime.getTime() + interval);
    var hours = updateDate.getHours();
    var minutes = updateDate.getMinutes();
    var seconds = updateDate.getSeconds();
    var miliseconds = Math.floor(updateDate);
 
    var content = text + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + '<br><small>(w ms: <strong>' + miliseconds + '</strong>)</small>';
    document.getElementById(id).innerHTML = content;
 
    interval = interval + 1000;
  }, 1000);
}
</script>
[HTML] pobierz, plaintext