HOME  >   HTML5 CANVAS  >   CSS3 ANIMATION  >   HTML5/CSS3 Implementation of Binary Digital Clock Animation
HTML5/CSS3 Implementation of Binary Digital Clock Animation
BY Brian12 Jan,2021
Tags:

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

HTML5/CSS3 Implementation of Binary Digital Clock Animation
HTML Body Code
<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>                        
Css Code
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;"
}                        
Js Code
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