Часы на веб-странице с использованием сервера и системного времени?

Мне нужно добавить часы на веб-страницу. Часы должны быть синхронизированы с сервером, но я действительно не хочу, чтобы он постоянно проверял сервер, поскольку страница будет открыта 24/7 на нескольких ПК. Есть ли способ получить время с сервера, а затем использовать системные часы, чтобы обновлять их и проверять сервер каждые 15 минут или около того, чтобы синхронизировать его?

Ответ 1

Как я уже говорил об этом раньше:

Найдите время с сервера,
Найдите время у клиента (сразу)
Получить смещение.
При показе часов применяйте смещение к текущему времени на клиенте.

Вам нужно обновлять это время от сервера.

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

Ответ 2

+Date.now() возвращает local ms с эпохи Unix. Итак:

Получить время с сервера
Рассчитать разницу между временем сервера и местным временем
Обновляйте часы каждую секунду или минуту (в зависимости от того, что вы показываете), получая местное время и настраивая его с помощью разницы
Каждые 15 минут обновляют разницу.

Или что-то в этом роде.

Здесь скрипка демонстрирует первый тайм:

var serverTime = 1310127993162; //this would come from the server obviously
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    console.log(+Date.now() + timeDiff);
}, 1000);

Ответ 3

Одна идея заключается в ответе на дату и время на странице, когда она запрашивается. как:

<html>
your serveside codes,
<script>
var serverdatetime = new Date("<%=Datetime.Now%>");
//use serverdatetime and update it after 15 mins.

// you can use ajax to get datetime
setTimeout(function(){
    $.ajax({
  url: 'http://yourhost.com/getdate',
  success: function( data ) {
    // use data and update serverdatetime
  }
});},54000);
</script>
server codes

</html>

** примечание: это только идея, код может не работать

Ответ 4

Server Time: <input type="text" id="clock" value="" size='8'>

<script type="text/javascript">
var serverTime = <?php echo time() * 1000; ?>; //this would come from the server
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    var realtime = +Date.now() + timeDiff;
    var date = new Date(realtime);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = date.getMinutes();
    // seconds part from the timestamp
    var seconds = date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes + ':' + seconds;

    $('#clock').attr('value',formattedTime); <-- input id=clock
}, 1000);
</script>

Ответ 5

Вы можете получить текущее время с сервера при каждой загрузке страницы, поэтому даже при первой загрузке вы будете иметь текущее время сервера. После этого вы можете использовать таймер javascript на странице, заданной для галочки каждую секунду, и тогда вы фактически будете синхронизировать часы с сервером. Вы также можете попробовать применить смещения, как было предложено, но я бы не рекомендовал, так как отставание во время обратной передачи.

Запрос Ajax может быть интересным вариантом.

Любые сомнения, вы также можете проверить это время!

Кроме того, W3Schools - отличная ссылка для javascript.

Ответ 6

<script>
var ctoday = <?php echo time() * 1000 ?>;
setInterval(function() {ctoday += 1000;},1000);
function startTime() {
    var today = new Date(ctoday);
    var montharray = new Array("Jan","Feb","Mar","Abr","May","Jun","Jul","Ogu","Sep","Oct","Nov","Des");
    var h = today.getHours();
    var ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12;
    h = h ? h : 12;
    var m = today.getMinutes();
    var s = today.getSeconds();
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    checkTime(today.getDate())+" "+montharray[today.getMonth()]+" "+today.getFullYear() + " (" + ampm +" " + h + ":" + m + ":" + s +")"; 
    setTimeout(startTime, 1000);
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
</script>
<body onLoad="startTime();">
    <span id="txt"></span>
</body>

Создать переменную содержит время сервера, используя PHP.
Добавляет 1000 к отметке времени каждые 1 сек (1000 = 1 с).
Теперь вы получите часы.
Теперь создайте новую дату с добавленной меткой времени.
создает имена месяцев
обнаружение AM или PM.
конвертировать формат часов с 24 до 12
Получение минут
Получение секунд
добавьте 0 строк, если количество часов меньше 10
добавить 0 строк, если минуты менее 10
добавить 0 строк, если секунды менее 10
Теперь соедините все время и дату и поместите их в элемент DOM с идентификатором "txt"
повторять функцию каждые 1 сек. Функция
добавляет 0, чтобы привести числа < 10

Ответ 7

Попробуйте ввести код ниже:

var m_serverDateTime;
var currentOffsetedTime;
var diffMilliseconds;

$(document).ready(function () {
   m_serverDateTime = getServerDateTime();/*your function to get server time 
by ajax call */   
diffMilliseconds = GetServerTimeDifference(m_serverDateTime);

});

 function GetServerTimeDifference(serverdatetime) {
  var fromdate = new Date();

  var todate = new Date(serverdatetime);

  var localdiffMilliseconds = todate - fromdate;

  return localdiffMilliseconds;
 }

setInterval(function () {
  //var currentOffsetedTime = new Date().setMinutes(diffMinutes);
  currentOffsetedTime = new Date();
  currentOffsetedTime.setMilliseconds(diffMilliseconds);

  $('#lblTimer').text(format(currentOffsetedTime, 'dd/MM/yyyy  HH:mm'));
}, 1000);

Ответ 8

вы получаете только одно время с сервера, при загрузке вызываете этот метод и используете моменты js для даты формата:

var timeMiliSecond = new Date(serverTime).getTime();
 callRepeatedly() {
    setTimeout(() => {
         timeMiliSecond = timeMiliSecond+1000;         
         serverTime=moment(newDate(timeMiliSecond)).format('MM-DD-YYYY HH:mm:ss');
         this.callRepeatedly();
      }, 1000)  
  }