Обратно идущие часы до конца дня
Дайте плиз скрипт обратно идущих часов до конца дня.. Время сервера должно туда передаваться.. В один див или спан чтобы записывалось.. Без плагинов.. Что нибудь наподобии -
function startTime()
{
var tm=new Date();
var h=tm.getHours();
var m=tm.getMinutes();
var s=tm.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
Только в обратном направлении и как сюда new Date();передать текущее время сервера |
Спс, но немного не то(.. Тут 23:00:15..15 секунд проходит- и становится 23:00.. Мне нужны обычные часы, идущие в обратном направлении исходя из времени сервера, без поправки на часовой пояс клиента.. К примеру, на сервере 23:59:57- тогда 00:00:02, 00:00:01, 00:00:00.. Неправильно объяснил изначально, сорри
|
:help:
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Первый таймер</p>
<div id="time"></div>
<p>Второй таймер</p>
<div id="time2"></div>
<script>
var MyTime = (function(){
function MyTime(){
this.config = {
delay: 1000 // Частота обновления таймера
};
}
MyTime.prototype = {
constructor: MyTime,
len: function(value){
value = value + '';
value = (value.length === 1) ? ('0' + value) : value;
return value;
},
format: function(date){
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliseconds = date.getMilliseconds();
var h = 23 - hours;
var m = 59 - minutes;
var s = 59 - seconds;
var ms = 999 - milliseconds;
h = this.len(h);
m = this.len(m);
s = this.len(s);
return { h: h, m: m, s: s, ms: ms };
},
setDate: function(time){
var config = this.config;
config.serverDate = new Date(+time * 1000);
config.clientDate = new Date();
},
update: function(fn){
var self = this;
var config = this.config;
var delay = config.delay || 1000;
var clientDate = config.clientDate;
var clientTime = clientDate.getTime();
var currentTime = new Date().getTime();
var elapsedTime = currentTime - clientTime;
var serverDate = config.serverDate;
var date = new Date(serverDate.getTime() + elapsedTime);
if (fn && typeof fn === 'function'){
fn.call(this, date);
setTimeout(function(){
self.update(fn);
}, delay);
}
}
};
return MyTime;
})();
var t1 = document.getElementById('time'),
t2 = document.getElementById('time2');
var time = new MyTime(); // Создали таймер
time.config.delay = 1000; // Указали частоту обновления таймера (не обязательно). Если не указать по умолчанию стоит 1000
time.setDate(1440190797); /* Передаём серверное время в unix формате */
time.update(function(date){
var d = this.format(date);
var f = d.h + ':' + d.m + ':' + d.s;
t1.innerHTML = f;
});
/* Можно создать несколько таймеров */
var time2 = new MyTime();
time2.config.delay = 1;
time2.setDate(new Date().getTime() / 1000);
time2.update(function(date){
var d = this.format(date);
var f = d.h + ':' + d.m + ':' + d.s + ':' + d.ms;
t2.innerHTML = f;
});
</script>
</body>
</html>
|
Там можно использовать и серверное время, я для примера вставил клиентское время.
Как я бы сделал. Я бы послала на сервер запрос через ajax, сервер бы мне вернул unix time, и я этот unix time вставил бы в time.setDate(/* здесь будет серверный unix time */). Примерный код если использовать jQuery
var time = new MyTime()
$.ajax({
url: 'main.php', // тут нужно указать ссылку на серверный скрипт, который будет возвращать unix time,
type: 'POST',
dataType: 'json',
data: {
action: 'getTime'
},
success: function(response){
var t = response.time;
time.setDate(t);
time.update(function(date){
var d = this.format(date);
console.log(d);
});
}
});
Серверный код <?php if ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest'){ // Отвечаем только на AJAX запросы $response = array(); $action = $_POST['action']; switch($action){ case 'getTime': $response['time'] = time(); die(json_encode($response)); break; } } |
таймер до конца дня осталось
tenebrosus,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test{
color: rgb(102, 255, 255);
background-image: -webkit-gradient(linear, left, right, color-stop(0, #0000CD), color-stop(1, #FF00FF));
background-image: -o-linear-gradient(left, #0000CD, #FF00FF);
background-image: -moz-linear-gradient(left, #0000CD, #FF00FF);
background-image: -webkit-linear-gradient(left, #0000CD, #FF00FF);
background-image: linear-gradient(to right, #0000CD, #FF00FF)
}
.time span{
margin: 2px;
font-weight: bold;
}
</style>
</head>
<body>
<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) / a.from;
1 < e && (e = 1);
b.fullData = b.formatTime(a.from + (-a.from * e | 0));
1 == e && a.callback && a.callback();
1 > 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 24 * 60 * 60 * 1000 - (a[0] * 60 * 60 * 1000 + a[1] * 60 * 1000 + a[2] * 1000)
}
var span = document.querySelector('.time') ;
var timer = fn(span);
timer({
from : init('23:59:57'),
callback : function() { span.classList.add('test')}
})
</script>
</body>
</html>
|
рони, Спасибооо! Оно!)))
|
Все работает как надо, только Uncaught TypeError: Cannot read property 'appendChild' of null в консоли:blink:
|
tenebrosus,
какой браузер? и ошибка точно от этого скрипта? |
Извиняюсь)
|
| Часовой пояс GMT +3, время: 06:17. |