Today we are going to introduce another binary clock animation with a different style, based on HTML5 and CSS3 implementation. The difference with the previous one is that this clock is accurate to milliseconds and the binary representation area will follow the clock to change synchronously after the timing starts, which is very cool.
Advertisement
<div class="binary-display"> <div class="binary-item" id="mt8"></div> <div class="binary-item" id="mo8"></div> <div class="binary-item" id="st8"></div> <div class="binary-item" id="so8"></div> <div class="binary-item" id="d8"></div> <div class="binary-item" id="mt4"></div> <div class="binary-item" id="mo4"></div> <div class="binary-item" id="st4"></div> <div class="binary-item" id="so4"></div> <div class="binary-item" id="d4"></div> <div class="binary-item" id="mt2"></div> <div class="binary-item" id="mo2"></div> <div class="binary-item" id="st2"></div> <div class="binary-item" id="so2"></div> <div class="binary-item" id="d2"></div> <div class="binary-item" id="mt1"></div> <div class="binary-item" id="mo1"></div> <div class="binary-item" id="st1"></div> <div class="binary-item" id="so1"></div> <div class="binary-item" id="d1"></div> </div>
button { padding: 0.4rem; background-color: inherit; font-family: inherit; font-size: inherit; border: none; border-radius: 5px; color: hsla(189, 100%, 45%, 0.5); cursor: pointer; text-transform: uppercase; } button:hover { background: rgba(0, 0, 0, 0.75); color: inherit; text-shadow: 0 0 8px hsla(180, 100%, 85%, 0.7); } button:disabled { background-color: hsla(0, 0%, 0%, 0); color: hsla(189, 100%, 45%, 0.5); text-shadow: none; cursor: default; } a { position: absolute; bottom: 1rem; right: 1.5rem; font-family: inherit; font-weight: bold; color: rgba(255, 255, 255, 0.65); background-color: black; text-decoration: none; padding: 4px 6px; font-size: 12px; line-height: 1.2; display: inline-block; border-radius: 3px;" }
let runningTimer; let timerStatus = false; function displayTime(decSeconds) { const minutes = Math.floor(decSeconds / 600); const restDecSecs = decSeconds % 600; const seconds = Math.floor(restDecSecs / 10); const deciSeconds = restDecSecs % 10; const displayMins = `${minutes < 10 ? "0" : ""}${minutes}`; const displaySecs = `${seconds < 10 ? "0" : ""}${seconds}`; const displayDecSecs = `${deciSeconds}`; const display = `${displayMins}:${displaySecs}.${displayDecSecs}`; timerDisplay.textContent = display; displayBinary("mt", Math.floor(minutes / 10)); displayBinary("mo", minutes % 10); displayBinary("st", Math.floor(seconds / 10)); displayBinary("so", seconds % 10); displayBinary("d", deciSeconds); }
Advertisement