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:#fff;
  padding:0;
  margin:0;
  overflow:hidden;
  color:#333;
}

#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

// forked from _tetsuwo's "Horizontal Bar Digital Clock - 1.0" http://jsdo.it/_tetsuwo/eriy
/**
 *  [HorizontalBarDigitalClock]
 *
 *  Author  : tetsuwo.oishi
 *  Twitter : @_tetsuwo
 *  Blog    : http://tetsuwo.tumblr.com/
 *  Version : 1.1
 *  Note    : 修正点…月末日処理、yyyy.mm.dd hh:ii:ssの色付け、変数短縮
 */
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 cvs;
  var ctx;
  var timerID,per = null;

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

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

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

    if (cvs && cvs.getContext)
    {
      ctx = cvs.getContext('2d');
      setting();
      enterFrame();
      timerID = setInterval(enterFrame, 10);
      window.addEventListener('resize', resize, false);
    }
  };

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

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

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

  function html(id, num)
  {
    $(id).style.color = colors[id];
    $(id).innerHTML = digit(num);
  }

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

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

    html(id, num);
  }

  function enterFrame()
  {
    ctx.clearRect(0, 0, cvs.width, cvs.height);

    var t = new Date();
    var y = t.getFullYear();
    var nextY,nextM =...