window.createTimeCounter = function createTimeCounter(f, log) {
var box = $('<div/>').addClass('timebox');
////////
function num(n, t) {
var s = '';
for (var i = 0; i < n; i++) {
s += i % 10 + '<br>';
}
s += '0';
var a = 'time' + n + ' ' + t + 's linear infinite';
if (log)
console.log(n, t, a);
return $('<div/>').html(s).addClass('timenumber')
.css('animation', a);
}
////////
function hol(c, r, i) {
if ('hmsc'.indexOf(c) == -1) return $('<b/>').html(c);
var h = $('<div/>').addClass('timeholder');
var a = {
c: {
def: [0.01, 10],
11: [0.1, 10],
},
s: {
def: [1, 10],
20: [60, 6]
},
m: {
def: [60, 10],
20: [3600, 6]
},
h: {
def: [3600, 10],
}
};
var ac = a[c];
var b = ac[10 * r + i];
if (!b) {
b = ac.def;
b[2] = b[0];
for (var j = 0; j < r - i; j++) b[2] *= b[1];
b[0] = b[2];
}
if (log)
console.log(10 * r + i, c, r, i, ac, ac.def, b);
return h.append(
num(b[1], b[0]));
}
///////
for (var i = 0; i < f.length; i++) {
var c = f.charAt(i);
var r = new RegExp(c, 'g');
var reps = (f.match(r) || '').length;
var ind = (f.substr(0, i).match(r) || '').length;;
box.append(hol(c, reps, ind));
}
return box;
}
s = document.createElement('style');
s.innerHTML =
'@keyframes time10 { 0% {top: 0px;} 100% {top: -200px;}}' +
'@keyframes time6 { 0% {top: 0px;} 100% {top: -120px;}}' +
'.timebox {display: inline-block;}' +
'.timeholder { display: inline-block; width: 12px; height: 20px; overflow-y: hidden;}' +
'.timebox b { display: inline-block; vertical-align: super; line-height: 20px;}' +
'.timenumber { width: 10px; text-align: center; margin: auto; position: relative; line-height: 20px;}' +
'.timebox * { border: 1px solid black;}';
document.head.appendChild(s);
createTimeCounter('hhh:mm:ss', 8).appendTo($('body'));
$('body').append('<br>');
createTimeCounter('ssss.cccccccc').appendTo($('body'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
setInverval()