CodePen Embed - Digital watch (Css + Js)

<body>
    <div class="wrapper">
      <ul class="digit hours--1">
        <li class="item digit__item item--h item--1"></li>
        <li class="item digit__item item--v item--2"></li>
        <li class="item digit__item item--v item--3"></li>
        <li class="item digit__item item--h item--4"></li>
        <li class="item digit__item item--v item--5"></li>
        <li class="item digit__item item--v item--6"></li>
        <li class="item digit__item item--h item--7"></li>
      </ul>

      <ul class="digit hours--2">
        <li class="item digit__item item--h item--1"></li>
        <li class="item digit__item item--v item--2"></li>
        <li class="item digit__item item--v item--3"></li>
        <li class="item digit__item item--h item--4"></li>
        <li class="item digit__item item--v item--5"></li>
        <li class="item digit__item item--v item--6"></li>
        <li class="item digit__item item--h item--7"></li>
      </ul>

      <span class="dottes"></span>

      <ul class="digit min--0">
        <li class="item digit__item item--h item--1"></li>
        <li class="item digit__item item--v item--2"></li>
        <li class="item digit__item item--v item--3"></li>
        <li class="item digit__item item--h item--4"></li>
        <li class="item digit__item item--v item--5"></li>
        <li class="item digit__item item--v item--6"></li>
        <li class="item digit__item item--h item--7"></li>
      </ul>

      <ul class="digit min--1">
        <li class="item digit__item item--h item--1"></li>
        <li class="item digit__item item--v item--2"></li>
        <li class="item digit__item item--v item--3"></li>
        <li class="item digit__item item--h item--4"></li>
        <li class="item digit__item item--v item--5"></li>
        <li class="item digit__item item--v item--6"></li>
        <li class="item digit__item item--h item--7"></li>
      </ul>

      <ul class="digit digit--sec">
        <li class="item digit__item item--h item--1"></li>
        <li class="item digit__item item--v item--2"></li>
        <li class="item digit__item item--v item--3"></li>
        <li class="item digit__item item--h item--4"></li>
        <li class="item digit__item item--v item--5"></li>
        <li class="item digit__item item--v item--6"></li>
        <li class="item digit__item item--h item--7"></li>
      </ul>

      <ul class="digit digit--sec">
        <li class="item digit__item item--h item--1"></li>
        <li class="item digit__item item--v item--2"></li>
        <li class="item digit__item item--v item--3"></li>
        <li class="item digit__item item--h item--4"></li>
        <li class="item digit__item item--v item--5"></li>
        <li class="item digit__item item--v item--6"></li>
        <li class="item digit__item item--h item--7"></li>
      </ul>
    </div>

/* Base Styles
----------------------------------- */
BODY {
  height: 100%;
}

BODY {
  margin: 0;
  padding: 0;
  background: black;
  font-family: Arial;
  font-size: 16px;
}
@media (max-width: 800px), (max-height: 350px) {
  BODY {
    font-size: 12px;
  }
}
@media (max-width: 600px), (max-height: 250px) {
  BODY {
    font-size: 8px;
  }
}

UL {
  padding: 0;
  margin: 0;
}

LI {
  list-style: none;
}

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 12em;
  white-space: nowrap;
  text-align: center;
}
.wrapper:before {
  content: "";
  display: inline-block;
  height: 12em;
  width: 20px;
  vertical-align: middle;
}

/* Dottes
----------------------------------- */
.dottes {
  display: inline-block;
  width: 1em;
  margin: 0 1em;
  background: transparent !important;
  vertical-align: middle;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.dottes:before, .dottes:after {
  content: "";
  display: block;
  width: 1em;
  height: 0;
  border-bottom: 1em solid #151515;
  -webkit-transition: border-color 0.5s;
  transition: border-color 0.5s;
}
.dottes:before {
  margin-bottom: 2em;
}

/* Digit
----------------------------------- */
.digit {
  display: inline-block;
  width: 6em;
  margin: 0 1em;
  vertical-align: middle;
}

.digit__item {
  position: relative;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.digit__item:before, .digit__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  -webkit-transition: border-color 0.5s;
  transition: border-color 0.5s;
}

.item--h {
  clear: both;
  width: 3.4em;
  height: 1em;
  margin: 0 auto;
}

.item--1:before, .item--1:after {
  border-bottom-color: transparent !important;
}
.item--1:before {
  left: -1em;
  border-left-color: transparent !important;
}
.item--1:after {
  right: -1em;
  border-right-color: transparent !important;
}

.item--4 {
  width: 3.4em;
  margin: 4em auto 0;
}
.item--4:before {
  left: -0.5em;
  border-left: 0;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
.item--4:after {
  right: -0.5em;
  border-right: 0;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

.item--7:before, .item--7:after {
  border-top-color: transparent !important;
}
.item--7:before {
  left: -1em;
  border-left-color: transparent !important;
}
.item--7:after {
  right: -1em;
  border-right-color: transparent !important;
}

.item--v {
  float: left;
  width: 1em;
  height: 3.4em;
  margin: 0.3em 0;
}
.item--v:before {
  top: -1em;
}
.item--v:after {
  bottom: -1em;
}

.item--3,
.item--6 {
  float: right;
}

.item--2:before,
.item--5:before {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.item--2:after,
.item--5:after {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}

.item--3:before,
.item--6:before {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
.item--3:after,
.item--6:after {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

.item--2:after,
.item--5:before {
  border-left-color: transparent !important;
}

.item--3:after,
.item--6:before {
  border-right-color: transparent !important;
}

.item {
  background: #151515;
}
.item:before, .item:after {
  border-color: #151515;
}

.digit--sec {
  vertical-align: text-bottom;
  font-size: .5em;
}
@media (max-width: 600px) {
  .digit--sec {
    display: none;
  }
}

View Compiled

var digits_map = [[".item--1", ".item--2", ".item--3", ".item--5", ".item--6", ".item--7"],
  [".item--3", ".item--6"],
  [".item--1", ".item--3", ".item--4", ".item--5", ".item--7"],
  [".item--1", ".item--3", ".item--4", ".item--6", ".item--7"],
  [".item--2", ".item--3", ".item--4", ".item--6"],
  [".item--1", ".item--2", ".item--4", ".item--6", ".item--7"],
  [".item--1", ".item--2", ".item--4", ".item--5", ".item--6", ".item--7"],
  [".item--1", ".item--3", ".item--6"],
  [".item--1", ".item--2", ".item--3", ".item--4", ".item--5", ".item--6", ".item--7"],
  [".item--1", ".item--2", ".item--3", ".item--4", ".item--6", ".item--7"]
  ];

var head = document.querySelector('head');
head.insertAdjacentHTML('beforeend', '<style id="coloring"></style>');
var style_container = document.getElementById("coloring");

var color_step = 0;
var color_steps_max = 12;
var color_period = 1; // time out before changing color
var color_time_counter = 0;
var color_class = "js-color--active";

var digits = document.querySelectorAll('.digit');
var digit_item_class = ".digit__item";
var digits_items = document.querySelectorAll(".digit__item");
var dottes = document.querySelector(".dottes");
var dottes_items = document.querySelectorAll(".dottes__item");

setTime();
var interval = setInterval(setTime,1000); 

function setTime() {

  // Get Date 
  var now = new Date();
  var hour = now.getHours() >= 10 ? now.getHours() : "0" + now.getHours();
  var min = now.getMinutes() >= 10 ? now.getMinutes() : "0" + now.getMinutes();
  var sec = now.getSeconds() >= 10 ? now.getSeconds() : "0" + now.getSeconds();
  var date_string = hour + "" + min + "" + sec;

  // Change Time
  for ( var i = 0; i < digits.length; i++ ) {
    
    var digit = digits[i];
    var digit_value = +date_string.charAt(i);

    remove_class_from_items (digit, color_class);
    remove_class_from_elem(dottes, color_class);

    var digit_elems_classes = digits_map[digit_value];

    if ( digit_elems_classes.length > 0 ){
      for ( var l = 0; l < digit_elems_classes.length; l++ ){
        var item = digit.querySelector(digit_elems_classes[l]);
        item.classList.add( color_class  );
        }
    } 
    
  }

  dottes.classList.add( color_class );

  // Change colors
  if ( color_time_counter == color_period ){
    color_time_counter = 0;
    change_color_by_style();
  }
  else {
    color_time_counter++;
  }
  
}

function add_class_to_items ( elem ) {
  var items = elem.querySelectorAll(".item");

  for ( var i = 0; i < items.length; i++ ){
    items[i].classList.add ( class_color );
  }
}

function remove_class_from_items ( elem, class_prefix ) {
  var items = elem.querySelectorAll(".item");

  for ( var i = 0; i < items.length; i++ ){
    remove_class_from_elem(items[i], class_prefix);
  }
}

function remove_class_from_elem ( elem, class_prefix ) {
  var classes = elem.classList;
      
  for ( var k = 0; k < classes.length; k++ ){
    if ( classes[k].indexOf(class_prefix) >= 0 ){
      elem.classList.remove(classes[k]);
    }
  }
}

function change_color_by_style(){

  var hue_value = 360 / color_steps_max * color_step;
  var bright_value = 50; 
  
  var current_color = "hsl(" + hue_value + ", 70%, " + bright_value + "%)";
  var color_class_local = "." + color_class;

  var styles = color_class_local + " { background: " + current_color + "; }";
    styles += color_class_local + ":before, " + color_class_local + ":after { border-color: " + current_color + "; }";

  style_container.innerHTML = styles;

  if ( color_step < color_steps_max ){
    color_step++;
  }
  else {
    color_step = 0;
  }
}

This Pen is owned by yoksel on CodePen.

See more by @yoksel on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.