JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="digital">
  <span id="y"></span>.<span id="m"></span>.<span id="d"></span> <span id="h"></span>:<span id="i"></span>:<span id="s"></span>
</div>

<canvas id="HorizontalBarDigitalClock"></canvas>

CSS

body {
  background-color:#000;
  padding:0;
  margin:0;
  overflow:hidden;
  color:#fff;
}

#digital {
  border-radius:5px;
  /*border:1px solid #fff;
  background-color:#d00;
  /padding:5px;*/
  margin:10px;
  color:#fff;
  font-family:'Arial';
  font-weight:bold;
  text-shadow:0 1px 1px rgba(0,0,0,0.3);
}

JavaScript

HorizontalBarDigitalClock = new function(){

  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  var CANVAS_WIDTH = SCREEN_WIDTH - 20;
  var BAR_HEIGHT = 20;
  var BAR_MARGIN_BOTTOM = 5;

  var canvas;
  var context;
  var doc = document;
  var timerID,per = null;

  var colors = {
    y:'#ff1e1e',
    m:'#ff1e8e',
    d:'#8e1eff',
    h:'#1e8eff',
    i:'#1eff8e',
    s:'#8eff1e',
  };

  var $ = function(id)
  {
    return doc.getElementById(id);
  };

  this.init = function()
  {
    canvas = $('HorizontalBarDigitalClock');

    if (canvas && canvas.getContext)
    {
      context = canvas.getContext('2d');
      setting();
      enterFrame();
      timerID = setInterval(enterFrame, 1000);
      window.addEventListener('resize', resize, false);
    }
  };

  function resize()
  {
    clearInterval(timerID);
    context.clearRect(0, 0, canvas.width, canvas.height);
    HorizontalBarDigitalClock.init();
  }

  function setting()
  {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    CANVAS_WIDTH = SCREEN_WIDTH - 20;
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
  }

  function digit(num)
  {
    return num > 9 ? num : '0'+num ;
  }

  function draw(num, max, cnt, id)
  {
    per = 100 / max * num;

    context.beginPath();
    context.fillStyle = colors[id];
    context.fillRect(10, ((BAR_HEIGHT * cnt) + (BAR_MARGIN_BOTTOM * cnt)), (CANVAS_WIDTH * (per / 100)), BAR_HEIGHT);
    context.fill();

    $(id).innerHTML = digit(num);
  }

  function enterFrame()
  {
    context.clearRect(0, 0, canvas.width, canvas.height);

    var t = new Date();
    var y = t.getFullYear();

    draw(             y,  y, 0, 'y');
    draw(  t.getMonth(), 12, 1, 'm');
    draw(   t.getDate(), 31, 2, 'd');
    draw(  t.getHours(), 24, 3, 'h');
    draw(t.getMinutes(), 60, 4, 'i');
    draw(t.getSeconds(), 60, 5, 's');
  }
};

HorizontalBarDigitalClock.init();