Time on the site in real time date day year hours minutes up to seconds?

Question

PHP

Display the time on the site

<?
$date = new DateTime();
$timestamp = $date->getTimestamp();
?>

<span id="day"><?= date('d', $timestamp) ?></span>.<span id="month"><?= date('m', $timestamp) ?></span>.<span id="year"><?= date('Y', $timestamp) ?></span> <span id="hours"><?= date('H', $timestamp) ?></span>.<span id="min"><?= date('i', $timestamp) ?></span>.<span id="sec"><?= date('s', $timestamp) ?></span>

<script type="text/javascript">
            $(document).ready(function() {
                var YEAR = <?= date('Y', $timestamp) ?>;
                var MONTH = <?= date('m', $timestamp) ?>;
                var DAY = <?= date('d', $timestamp) ?>;
                var HOUR = <?= date('H', $timestamp) ?>;
                var MINUTE = <?= date('i', $timestamp) ?>;
                var SECOND = <?= date('s', $timestamp) ?>;

                setTimeout(updateDateTime, 1000);

                setTimeout(syncDateTime, 1000 * 60 * 15);

                //////////////////////

                function syncDateTime() {
                    $.getJSON('/get_date.php', function(dateTime){
                        console.log(dateTime);

                        YEAR = parseInt(dateTime.year);
                        MONTH = parseInt(dateTime.month);
                        DAY = parseInt(dateTime.day);
                        HOUR = parseInt(dateTime.hour);
                        MINUTE = parseInt(dateTime.minute);
                        SECOND = parseInt(dateTime.second);
                    });

                    setTimeout(syncDateTime, 1000 * 60 * 15);
                }

                function updateDateTime() {
                    $("#year").html(YEAR);
                    $("#month").html(getTwoDigit(MONTH));
                    $("#day").html(getTwoDigit(DAY));
                    $("#hours").html(getTwoDigit(HOUR));
                    $("#min").html(getTwoDigit(MINUTE));
                    $("#sec").html(getTwoDigit(SECOND));

                    SECOND += 1;

                    if (SECOND === 60) {
                        SECOND = 0;
                        MINUTE += 1;
                    }

                    if (MINUTE === 60) {
                        MINUTE = 0;
                        HOUR += 1;
                    }

                    if (HOUR === 24) {
                        HOUR = 0;
                        DAY += 1;
                    }

                    if (DAY === daysInMonth() + 1) {
                        DAY = 0;
                        MONTH += 1;
                    }

                    if (MONTH === 12) {
                        MONTH = 0;
                        YEAR += 1;
                    }

                    setTimeout(updateDateTime, 1000);
                }

                function daysInMonth() {
                    return new Date(YEAR, MONTH, 0).getDate();
                }

                function getTwoDigit(number) {
                    return (parseInt(number) < 10 ? '0' : '') + number;
                }
            });
        </script>

I'm already syncing every 15 minutes:

<? 
$date = new DateTime();
$timestamp = $date->getTimestamp();
$dateTime = array();

$dateTime['day'] = date('d', $timestamp);
$dateTime['month'] = date('m', $timestamp);
$dateTime['year'] = date('Y', $timestamp);

$dateTime['hour'] = date('H', $timestamp); 
$dateTime['minute'] = date('i', $timestamp);
$dateTime['second'] = date('s', $timestamp);

echo json_encode($dateTime);
?>

But time runs away 1-2 minutes ago happens. at least in chrome (as I understand it due to the timings in the browser). Everything is fine in firefox. Is there a thread solution so that the server time always goes clearly in real time? Ps time should be taken server and not locally.

Answer 1

Use momentjs

Answer 2

We take it and save somewhere the server time when loading the page.

<script>
var SERVER_TIME = <?php ... ?>; //Вот сюда
var REAL_TIME = <?php ... ?>;  //А сюда международное времечко по гринвичу
var coef = SERVER_TIME - REAL_TIME; //Ну или сразу только coef
</script>

Well, then, it's up to JS to display the date:

//С форматированием сами разберетесь
requestAnimationFrame(function b(){
   document.body.textContent = Date.now()  + coef;
   requestAnimationFrame(b);
});

https://jsfiddle.net/hoLr0ozr/2/

Answer 3

The javascript option will always show the time clearly.

<body>
<script type="text/javascript">
function showTime()
{
  var dat = new Date();
  var H = '' + dat.getHours();
  H = H.length<2 ? '0' + H:H;
  var M = '' + dat.getMinutes();

  M = M.length<2 ? '0' + M:M;
  var S = '' + dat.getSeconds();
  S = S.length<2 ? '0' + S:S;
  var clock = H + ':' + M + ':' + S;
  document.getElementById('clock_div').innerHTML=clock;
  setTimeout(showTime,1000);
}
</script>
<div id=clock_div></div>
<script type="text/javascript">showTime();</script>
</body>