88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
'use strict';
|
|
|
|
var digits = [];
|
|
|
|
function getEpoch() {
|
|
return Date.now().toString().slice(0,-3);
|
|
}
|
|
|
|
function createDigit() {
|
|
var digit = document.createElement('digit');
|
|
digit.innerHTML = '\
|
|
<flap-top> <n></n> </flap-top>\
|
|
<flap-top-flip> <n></n> </flap-top-flip>\
|
|
<flap-bottom> <n></n> </flap-bottom>\
|
|
<flap-bottom-flip> <n></n> </flap-bottom-flip>';
|
|
return digit;
|
|
}
|
|
|
|
function flipDigitTo(digit, currentVal, updatedVal) {
|
|
var topFlapNum = digit.querySelector('flap-top > n'),
|
|
topFlapFlip = digit.querySelector('flap-top-flip'),
|
|
topFlapFlipNum = topFlapFlip.querySelector('n'),
|
|
bottomFlapNum = digit.querySelector('flap-bottom > n'),
|
|
bottomFlapFlip = digit.querySelector('flap-bottom-flip'),
|
|
bottomFlapFlipNum = bottomFlapFlip.querySelector('n');
|
|
|
|
topFlapNum.innerHTML = updatedVal;
|
|
bottomFlapNum.innerHTML = currentVal;
|
|
|
|
topFlapFlipNum.innerHTML = currentVal;
|
|
topFlapFlip.style.display = 'block';
|
|
|
|
setTimeout(function() {
|
|
topFlapFlip.style.display = 'none';
|
|
}, 300);
|
|
|
|
setTimeout(function() {
|
|
bottomFlapFlipNum.innerHTML = updatedVal;
|
|
bottomFlapFlip.style.display = 'block';
|
|
}, 300);
|
|
|
|
setTimeout(function() {
|
|
bottomFlapNum.innerHTML = updatedVal;
|
|
bottomFlapFlip.style.display = 'none';
|
|
}, 450);
|
|
|
|
digit.setAttribute('current-val', updatedVal);
|
|
}
|
|
|
|
function updateClock() {
|
|
var epoch = getEpoch(),
|
|
staggerDelay,
|
|
currentVal,
|
|
updatedVal,
|
|
i;
|
|
|
|
for (i = 0; i < epoch.length; i+=1) {
|
|
if(i === epoch.length-1) {
|
|
staggerDelay = 0;
|
|
} else {
|
|
staggerDelay = Math.random() * 400;
|
|
}
|
|
currentVal = digits[i].getAttribute('current-val');
|
|
updatedVal = epoch[i];
|
|
if(currentVal !== updatedVal) {
|
|
setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
|
|
}
|
|
}
|
|
}
|
|
|
|
function setupClock() {
|
|
var epoch = getEpoch(),
|
|
staggerDelay,
|
|
digit,
|
|
i;
|
|
|
|
for (i = 0; i < epoch.length; i+=1) {
|
|
digit = createDigit();
|
|
staggerDelay = Math.random() * 400;
|
|
document.body.appendChild(digit);
|
|
setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
|
|
}
|
|
digits = document.querySelectorAll('digit');
|
|
}
|
|
|
|
setupClock();
|
|
setInterval(updateClock, 1000);
|