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