Как задать одинаковое время для всех на JS?

Question

[Палтос]

Подскажите как создать единое время для всех на JS? К примеру вставить в переменную js время из php а дальше уже с ней работать что бы там всё автоматом прибавлялось.
типа
var time = <?php $time ?>;
date = new Date(time);
$('body').on('click',function(){
console.log(date.getSeconds());
});
но что бы оно было динамическим ? можно сделать setinterval каждую секунду что бы прибавлял секунду, но это не гарантирует правильной работы

Answer 1

[Андрей]

Если вам нужно на клиенте отображать время сервера, то просто храните на клиенте разницу между временем клиента и временем сервера. И с помощью setInterval показывайте время клиента с учётом разницы с временем сервера.

Comments

[Палтос]

setInterval неточный

[Андрей]

Палтос, вы не поняли.
1. Получаете время с сервера.
2. Вычитаете из полученного времени время клиента и запоминаете его.
3. Везде где нужно использовать точное текущее время сервера - просто добавляете разницу полученную на шаге 2 к времени клиента, и получаете точное время сервера.

В setInterval каждую секунду добавляете к времени клиента дельту полученную на втором шаге и выводите, и даже если ваш setInterval будет выполняться с задержкой, на точность это не повлияет, и через день время будет точным

[Андрей]

Палтос, Вот, например jsfiddle.net/58dzeo7p/1

[Палтос]

Андрей, что то он не работает

var server = new Date(2019, 10, 28, 0, 0, 0, 0);  //к примеру время сервер

var diff = new Date - server; // Сохраняем разницу

setInterval(function(){
document.getElementById("timer").innerHTML = new Date(new Date().getTime() + diff); 
//Thu Sep 24 2015 00:54:58 GMT+0300 (RTZ 2 (зима))
}, 1000);

моё время на компе 26,10,2017

[Андрей]

Палтос, я перепутал знак
jsfiddle.net/58dzeo7p/2

[Палтос]

Андрей, То что нужно )) всё было очень просто и без разных библиотек ) спасибо

[Андрей]

Денис Ефремов, в чём вопрос?)

[Андрей]

Денис Ефремов, Я не очень понимаю на что обратить внимание, что не так?

[Андрей]

Денис Ефремов, если вы про то, что три цифры после запятой не совпадают - так это нормально, так отрабатывает setInterval, и поэтому с помощью него нельзя считать время (постепенно будет накапливаться ошибка). Но это не влияет на рассчёт времени и не снижает точность рассчётов, не добавляет ошибку.

[Андрей]

Денис Ефремов, дельное замечание, но ошибка не накапливается, поэтому не критично. Да и это просто пример, подсказка к решению задачи, не стоит его копипастить вслепую)

Answer 2

[Никита Кит]

moment.js
Спасибо, пожалуйста.

Comments

[Палтос]

Можешь подсказать как это реализовать с помощью этой библиотеки ?

[Никита Кит]

Палтос, если ты подробнее опишешь ЭТО, то может и смогу

[Никита Кит]

Палтос, на самом деле было бы намного полезнее для тебя самому порыться в документации и подумать, поэкспериментировать. Если я напишу тебе код, ничего продуктивного ты для себя не извлечёшь.

[Палтос]

Никита Кит, что бы у всех было одинаковое время (серверное) и что бы с этим временем можно было работать точно так же как и со стандартными свойствами JS типа :
d = new Date();
day = d.getDate();
nextday = new Date(d.setDate(day + 1)).getDate();

то есть задаём один раз серверное время в переменную var time = '<?php $time; ?>';
а дальше от неё отталкиваемся

[Никита Кит]

Палтос, я бы сделал так. Положил бы input hidden в разметку и в value с сервера подтягивал время <?php $time ?>. Забирал бы его оттуда, сплайсил бы строку в зависимости от того как она прилетает от сервера и

moment().set({'year': thisYear, 'month': thisMonth, ...});

[Палтос]

Никита Кит, сейчас попробую

[Никита Кит]

Палтос, вот, кстати говоря, скрипт таймера на главной moment.js, с помощью которого тикают часики. Вполне годная демка.
https://momentjs.com/static/js/core-home.js

[Палтос]

<script src="/time.js"></script>
 <script>
thisYear = 2017;
thisMonth = '10';
thisDay = '13';
thisHour = '22';
moment().set({'year': thisYear, 'month': thisMonth, 'day': thisDay,'hour': thisHour});
alert(moment()); //Thu Oct 26 2017 00:19:06 GMT+0300
</script>

что то не работает

[Никита Кит]

Палтос,

var second = now.seconds() * 6,
minute = now.minutes() * 6 + second / 60,
hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;

Ключевой фрагмент. И в now как раз подставляешь moment().set() который я приводил выше

[Никита Кит]

Палтос, потому что функцию апдейта напиши и каждую секунду её переинициализируй

// до этого кода должен быть сплайс того времени, что ты получил от сервера и инициализация переменных nowHour, nowMinute, nowSecond
  function startTime() {
    var date = moment().set({'hour': nowHour,'minute':nowMinute,'second':nowSecond});
    var hours = date.get('hour');
    var minutes = date.get('minute');
    var seconds = date.get('second');
    if (hours < 10) hours = "0" + hours;
    if (minutes < 10) minutes = "0" + minutes;
    if (seconds < 10) seconds = "0" + seconds;
    document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
    setTimeout(startTime, 1000);
  }
document.adEventListener('DOMContentLoaded',function(){
   startTime()
})

[Палтос]

Никита Кит, Да это какой то бред))) если сюда

var date = moment().set({'hour': nowHour,'minute':nowMinute,'second':nowSecond});

вписать время сервера, то здесь :

document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;

будут одинаковые значения при каждом обновлении ?

[Никита Кит]

Палтос, да, бред. Это я уже лагаю в 3 часа ночи. распиливать на hours, minutes, seconds нужно вне функции обновления, И скорее в твоём случае, поскольку время клиента не играет никакой роли, вообще не нужен moment. Просто напиши 3 разные функции обновления времени. Для hours, minutes и seconds. И выставь им разный setInterval. Для секунды 1000 , для минуты 1000 * 60, для часа 1000 * 60 * 60, для дня 1000 * 60 * 60 * 12 дальше уже сам считай, im tired

[Палтос]

Никита Кит, ну а месяцы бывают високосные
дни 30-31 день в общем решение уже есть

[Никита Кит]

Палтос, короче вот, накидал по бырому. апдейты можно объединить в одну функцию и закидывать туда разные аргументы.
А какие бы ни были месяцы, я думаю юзер не будет пребывать на странице дольше суток, при каждом повторном обращении время сервера будет запрашиваться по новой, так что тебе и таймера одного дня будет хватать с головой
https://codepen.io/ShadowOfCasper/pen/zPxvqB

[Палтос]

Уже косяк видно:

Спасибо конечно..) но я уже нашёл решение в пару строк

Да и тем более с таким кодом я вряд ли смогу высчитать предыдущий и следующий день. Ну даже если и так то это надо делать поверки последний/не последний месяц что бы поменять год и тд.. в общем так
будет лучше:

var server = new Date(2019, 10, 28, 0, 0, 0, 0);  //к примеру время сервер
var diff = new Date - server; // Сохраняем разницу
setInterval(function(){
		document.getElementById("timer").innerHTML = new Date(new Date().getTime() - diff);
}, 1000);

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