Часы на веб-странице, используя серверное и системное время?
Мне нужно добавить часы на веб-страницу. Часы должны быть синхронизированы с сервером, но я действительно не хочу, чтобы они постоянно проверяли сервер, так как страница будет открыта 24/7 на нескольких ПК. Есть ли какой-нибудь способ получить время с сервера, а затем использовать системные часы для его обновления и проверять сервер каждые 15 минут или около того, чтобы синхронизировать его?
8 ответов
То, как я пошел об этом раньше:
- Потратьте время с сервера,
- Потратьте время у клиента (немедленно)
- Получить смещение.
- При показе часов примените смещение к текущему времени на клиенте.
Вам нужно только обновить это время от времени с сервера.
Проблема, с которой вам нужно разобраться, заключается в том, что при отправке запроса на получение времени с сервера будет задержка, прежде чем вы сможете получить время клиента. Вероятно, вы можете минимизировать это, используя ajax-запрос, чтобы получить время сервера и ничего больше, тем самым сокращая накладные расходы, сетевые задержки и т. Д.
+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);
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>
Одна идея состоит в том, чтобы ответить на дату и время на странице, когда это запрашивается. лайк:
<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>
** примечание: это только идея, код может не работать
<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
Попробуйте ниже код это:
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);
Вы можете получать текущее время с сервера при каждой загрузке страницы, поэтому даже при первой загрузке у вас будет текущее время сервера. После этого вы можете использовать таймер JavaScript на странице, установленной для отметки каждую секунду, и тогда у вас фактически будут часы, синхронизированные с сервером. Вы также можете попробовать применить смещения, как предложено, но я бы не советовал, так как есть задержки во время обратных передач.
Ajax-запрос может быть интересным вариантом.
Любые сомнения, вы также можете проверить эти часы!
Кроме того, W3Schools является отличным справочником по JavaScript.
Вы просто получаете одно время даты с сервера, при загрузке вызываете этот метод и используете моменты 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)
}