Часы на веб-странице, используя серверное и системное время? - PullRequest
Новая
       28

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

11 голосов
/ 08 июля 2011

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

Ответы [ 8 ]

16 голосов
/ 08 июля 2011

Способ, который я использовал ранее:

  • Потратьте время с сервера,
  • Заберите время у клиента (немедленно)
  • Получить смещение.
  • При отображении часов примените смещение к текущему времени на клиенте.

Обновлять его необходимо только с сервера.

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

12 голосов
/ 08 июля 2011

+Date.now() возвращает локальные мс с эпохи 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);
4 голосов
/ 18 сентября 2013 
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>
4 голосов
/ 08 июля 2011

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

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

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

0 голосов
/ 17 ноября 2017

вы просто получаете одно время даты с сервера, при загрузке вызываете этот метод и используете моменты 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)  
  }
0 голосов
/ 20 сентября 2017

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

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);
0 голосов
/ 21 августа 2016 
<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>
  1. Создание переменной, содержащей время сервера, с использованием PHP.
  2. Добавляет 1000 к отметке времени каждую 1 секунду (1000 = 1 секунда).
  3. теперь получите часы.
  4. Теперь создайте новую дату с увеличенной отметкой времени.
  5. создает названия месяцев
  6. обнаружение AM или PM.
  7. преобразовать формат часов из 24 в 12
  8. Получение минут
  9. Получение секунд
  10. добавить 0 лидов, если часов меньше 10
  11. добавить 0 отведений, если минут меньше 10
  12. добавить 0 отведений, если секунд меньше 10
  13. Теперь объедините все время и дату и поместите их в элемент DOM. с идентификатором "txt"
  14. повторять функцию каждые 1 сек
  15. функция добавляет 0, чтобы привести числа <10 </li>
0 голосов
/ 08 июля 2011

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

Ajax-запрос может быть интересным вариантом.проверьте эти часы!

Кроме того, W3Schools - отличный справочник по JavaScript.

...