jurvrn,
<!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;
display: flex;
width: 50px;
justify-content: space-between;
}
.time span{
margin: 2px;
font-weight: bold;
text-align: center;
}
.time .sp, .time .spl{
color: rgb(255, 255, 255);
font-size: 20px;
}
.sec {
color: rgb(255, 255, 0);
}
.time .sp{
margin: -1px;
}
</style>
</head>
<body>
<span class="time"></span><br>
<script>
function fn(f, a) {
var c = {
cls: ["hour", "sp", "min"],
formatTime: function(b) {
b = Math.floor(b / 1E3);
var a = Math.floor(b / 60),
d = Math.floor(a / 60);
b %= 60;
a %= 60;
var t = b % 2 ? ":" : "\u200A";
return [c.two(d % 24), t, c.two(a)]
},
two: function(b) {
return (9 < b ? "" : "0") + b
},
timer: function(b) {
var a = performance.now();
requestAnimationFrame(function g(e) {
e -= a;
e = c.formatTime(b + e);
c.cls.forEach(function(a, b) {
a.innerHTML = e[b]
});
requestAnimationFrame(g)
})
},
init: function() {
a = a.split(":");
a = 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(a)
}
};
c.init()
};
var span = document.querySelector('.time') ;
fn(span, '02:08:41');// fn(span, '%uptime%');
//fn(span, '<?php echo date("G").":".date("i").":".date("s"); ?>');
</script>
</body>
</html>