diga,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.clock{
color: rgb(102, 255, 255);
background-color: rgb(0, 0, 255);
padding: 2px 4px;
border-radius: 4px;
display: inline-block;
}
.clock span{
margin: 2px;
font-weight: bold;
}
.clock .sp,.clock .time,.clock .spl{
color: rgb(255, 255, 255);
font-size: 20px;
}
.clock .sec {
color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<div class="timer">
<div class="clock"></div>
<div class="clock"></div>
<div class="clock"></div>
<div class="clock"></div>
<div class="button">
<button class="start" >Start</button>
<button class="stop" >Stop</button>
</div>
</div>
<script>
function fn(f, a) {
var c = {
stop: true,
start: performance.now(),
time: 0,
go: function() {
c.stop = false;
c.timer()
},
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() {
c.start = performance.now();
requestAnimationFrame(function g(e) {
if (c.stop) return;
e -= c.start;
c.time += e;
c.start = performance.now();
e = c.formatTime(c.time);
c.cls.forEach(function(a,
b) {
a.innerHTML = e[b]
});
requestAnimationFrame(g)
})
},
init: function() {
a = a.split(":");
c.time = 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()
}
};
c.init();
return c
}
window.addEventListener("DOMContentLoaded", function() {
var divs = document.querySelectorAll(".clock"),
st = document.querySelector(".stop"),
go = document.querySelector(".start"),
arr = ["02:08:41", "01:40:00", "05:00:00", "00:00:00"];
arr = arr.map(function(time, i) {
return fn(divs[i], time)
});
st.addEventListener("click", function() {
arr.forEach(function(time) {
time.stop = true
})
});
go.addEventListener("click", function() {
arr.forEach(function(time) {
time.go()
})
})
});
</script>
</body>
</html>