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>