Время на сайте в реалтайме дата число год часы минуты вплоть до секунд?

Question

[Андрей]

На сайте выводить время

<?
$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>

делаю уже синхронизацию каждые 15 мин:

<? 
$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);
?>

Но время убегает на 1-2 мин назад бывает. по крайней мере в хроме (как понимаю из за таймингов в браузере). В файрфоксе всё ровно. Есть какое нить решение чтобы время сервера всегда чётко шло в реалтайме? P.s. время надо брать серверное а не локально.

Comments

[AlikDex]

чаще синхронизировать? Либо передавать на страницу разницу с сервером и синхронизировать сам с собой уже учитывая разницу.

Вот пацанские часы =)
codepen.io/rassadin/pen/cvJmb

[Андрей]

AlikDex: не очень хороший вариант синхронизировать слать запрос на php какждую минуту когда у тебя на сайте 10к онлайна.

Answer 1

[lnked]

Используйте momentjs

Comments

[Андрей]

Я это всё пробывал. Мне надо серверное время транслировать в реалтайме а не локальное. И вплоть до числа минуты дня месяца года часа секунды. 13.02.2016 12.02.23

Answer 2

[Виталий Инчин ☢]

Берем значит и сохраняем куда-нибуль серверное время при загрузке страницы.

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

Ну а дальше, дело JS выводить дату:

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

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

Comments

[Андрей]

так так интересненько. А с датой как быть?

[Виталий Инчин ☢]

Андрей: ? под времечком я подразумеваю дату в виде секунд.

[Андрей]

Виталий Инчин ☢: мне надо полную 13.02.2016 12.53. чтобы вплоть до года менялось в реалтайме. и что будет если несколько вкладок человек откроет?

[Виталий Инчин ☢]

Андрей: вот смотрите. Date.now() + coef; возвратит нам дату в виде кол-ва секунд. Далее с ними мы можем делать что угодно, форматировать как вздумается. К примеру, вот так: (new Date( число )).toUTCString()

[Андрей]

Виталий Инчин ☢: походу оно. Чутка позже начну делать. Отпшусь

[Андрей]

Виталий Инчин ☢: короче я поставил синхронизацию гет запрос на php файл 1 раз в минуту думал при 10-15к запросов на php файл php процесс будет раздуваться а вообще ничего не даёт нагрузки.

Answer 3

[Saboteur]

Вариант на javascript, всегда будет показывать время четко.

<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>

Comments

[Andrzej Wielski]

Нет, не будет. 1000 миллисекунд в javascript это не ровно секунда. Это примерно секунда. Может воспроизвестись быстрее, может медленнее. В итоге все равно будет опаздывать.

[Андрей]

Andrzej Wielski: да будет убегать для этого и писал синхронизацию. остаёться 1 мысля может есть на node.js какая приблуда транслировать время через сокет?

[Андрей]

по мимо этого прошу заметить день месяц и год мне тоже надо чтобы в реалтайме был. И время мне надо брать серверное а не локальное!

[Saboteur]

Господа, с чего вы решили что что-то куда-то будет убегать?
Скрипт обновляет блок раз в секунду, но вставляет он туда значение из Date(), поэтому каждую секунду он будет показывать точное время. Максимум разница - одна секунда, при задержке вывода самого времени

[Андрей]

Сергей: в FF не будет в хроме будет. Тайминг браузера такой.

[Saboteur]

Андрей: Я вас не очень понимаю. Как тайминг браузера может вызвать задержку в минуту?

[Андрей]

Сергей: я незнаю почему оно убегает. И скажу даже больше незнаю как с локальным временем но с серверным оно может и на 2 минуты отстать

[Saboteur]

Еще раз повторю, как работает мой скрипт.
Обновлясь раз в секунду, он кладет в указанный DIV текущее локальное время. Поэтому он вообще не способен "убегать" в принципе, по своей архитектуре.

Что же касается серверного времени, можно передавать на страницу серверное время, при инициализации сравнивать с локальным и затем выводить локальное время с этой разницей - убегать не будет.