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>