Цитата:
|
время на сервере без использования new Date
XCanG,
строки после 100 для примера ... через некоторое время ваш вариант будет менее точен потому что setInterval и getSeconds() + 1 да и запустится через секунду <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .time{ color: rgb(102, 255, 255); background-color: rgb(0, 0, 255); padding: 2px 4px; border-radius: 4px; } .time span{ margin: 2px; font-weight: bold; } .time .sp, .time .spl{ color: rgb(255, 255, 255); font-size: 20px; } .sec { color: rgb(255, 255, 0); } </style> </head> <body> <span class="time"></span><br> <span class="time"></span><br> <span class="time"></span><br> <span class="time"></span> <script> function fn(f) { var b = { elem: f, cls: ["hour", "sp", "min", "spl", "sec"], formatTime: function(a) { a = Math.floor(a / 1E3); var c = Math.floor(a / 60), d = Math.floor(c / 60); a %= 60; c %= 60; return [b.two(d % 24), ":", b.two(c), ":", b.two(a)] }, two: function(a) { return (9 < a ? "" : "0") + a }, timer: function(a) { var c = performance.now(); requestAnimationFrame(function g(e) { e = e - c; b.fullData = b.formatTime(a.from + e); requestAnimationFrame(g) }) } }; b.cls.forEach(function(a, c) { var d = document.createElement("span"); d.classList.add(a); f.appendChild(d); Object.defineProperty(b, a, { get: function() { return d.innerHTML }, set: function(a) { d.innerHTML = a } }) }); Object.defineProperty(b, "fullData", { set: function(a) { b.cls.forEach(function(c, d) { b[c] = a[d] }) }, get: function() { return b.cls.map(function(a, c) { return b[a] }) } }); return b.timer }; function init(a) { a = a.split(':') return a[0] * 60 * 60 * 1000 + a[1] * 60 * 1000 + a[2] * 1000 } var span = document.querySelectorAll('.time') ; var timer = fn(span[0]); timer({ from : init('02:08:41') }) timer = fn(span[2]); timer({ from : init('07:43:19') }) var tst = '13.11.2015 02:08:41'; var upt = '07:43:19'; var m = tst.match(/\d+/g); var n = upt.match(/\d+/g); var dat = new Date(m[2],m[1] - 1,m[0],m[3],m[4],m[5]); var rat = new Date(m[2],m[1] - 1,m[0],n[0],n[1],n[2]); var upd_div = span[1]; var up2_div = span[3]; function timeupd(){ dat.setSeconds(dat.getSeconds() + 1); rat.setSeconds(rat.getSeconds() + 1); upd_div.innerHTML = ("0" + dat.getDate()).slice(-2) + "." + ("0"+(dat.getMonth()+1)).slice(-2) + "." + dat.getFullYear() + " " + ("0" + dat.getHours()).slice(-2) + ":" + ("0" + dat.getMinutes()).slice(-2) + ":" + ("0" + dat.getSeconds()).slice(-2); up2_div.innerHTML = ("0" + rat.getHours()).slice(-2) + ":" + ("0" + rat.getMinutes()).slice(-2) + ":" + ("0" + rat.getSeconds()).slice(-2); } window.setInterval("timeupd()",1000); </script> </body> </html> |
часы по времени сервера
:write:
убрал лишнее <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .time{ color: rgb(102, 255, 255); background-color: rgb(0, 0, 255); padding: 2px 4px; border-radius: 4px; } .time span{ margin: 2px; font-weight: bold; } .time .sp, .time .spl{ color: rgb(255, 255, 255); font-size: 20px; } .sec { color: rgb(255, 255, 0); } </style> </head> <body> <span class="time"></span><br> <script> function fn(f, a) { var c = { cls: ["hour", "sp", "min", "spl", "sec"], formatTime: function(b) { b = Math.floor(b / 1E3); var a = Math.floor(b / 60), d = Math.floor(a / 60); b %= 60; a %= 60; return [c.two(d % 24), ":", c.two(a), ":", c.two(b)] }, two: function(b) { return (9 < b ? "" : "0") + b }, timer: function(b) { var a = performance.now(); requestAnimationFrame(function g(e) { e -= a; e = c.formatTime(b + e); c.cls.forEach(function(a, b) { a.innerHTML = e[b] }); requestAnimationFrame(g) }) }, init: function() { a = a.split(":"); a = 36E5 * a[0] + 6E4 * a[1] + 1E3 * a[2]; c.cls = c.cls.map(function(a) { var d = document.createElement("span"); d.classList.add(a); f.appendChild(d); return d }); c.timer(a) } }; c.init() }; var span = document.querySelector('.time') ; fn(span, '02:08:41');// fn(span, '%uptime%'); //fn(span, '<?php echo date("G").":".date("i").":".date("s"); ?>'); </script> </body> </html> |
Цитата:
Сервер возвращает смещение часового пояса для временных зон, расположенных западнее UTC как отрицательные числа, а расположенных восточнее UTC - положительные. На клиенте же это смещение для временных зон, расположенных западнее UTC возвращаются положительные числа, а расположенных восточнее UTC - отрицательные. Остается привести это к одним единицам и сформировать метку по которой и получать текущее время на клиенте скорректированное по времени сервера. localTime + offset_local + offset_server А переданная с сервера временная метка не будет соответствовать текущему времени потому, что запрос можно обрабатываться и несколько секунд, а для времени это уже приличный интервал. |
laimas,
в пределах секунды это не так страшно (особенно если учесь что на некоторых компьютерах даже после синхронизации времени иногда смотришь туда и сюда и время в трее различно на 1 минуту). Если есть более точный способ отсчёта со стороны клиента, то я только за. Основная задача лишь чтобы при обновлении страницы время до обновления и после обновления было видно непрерывно (в пределах времени прогрузки самой страницы, когда она ещё не получена). |
Цитата:
Здесь не точность важна, а способ. Что касается синхронизации времени, то либо вы его синхронизируете по убогому серверу, либо... Разница в минуту, ну это слишком. У клиента есть системный таймер и во времени он не хуже сервера разбирается, и не метки сервера нужны клиенту, а всего лишь смещение часового пояса. Временная метка сервера, ну это отобразить некое фиксированное время, но не для часов. |
Часовой пояс GMT +3, время: 12:14. |