Hexadecimal Color Clock With jQuery and CSS3 - Hexclock

A beautiful jQuery/CSS hex clock that dynamically changes the background color of the webpage based on the current local time (6 digit hexadecimal number).

How to use it:

1. The required html structure for the hex clock.

<div class="hex-clock">
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</div>

2. Style the hex clock in the CSS.

.hex-clock {
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.hours:before { content: "{#}"; }

.hours:after, .minutes:after { content: ":"; }

3. Include the necessary jQuery JavaScript library on the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

4. The JavaScript to active the hex clock and change the background color of the whole webpage as time progresses.

$(function() {
  
  var $h = null;
  var $m = null;
  var $s = null;
  var $r, $g, $b, $rgb;

  function getTime() {
    var $time = new Date();
    $h = $time.getHours();
    $m = $time.getMinutes();
    $s = $time.getSeconds();
    if ($h < 10) {$h = "0"+$h};
    if ($m < 10) {$m = "0" + $m};
    if ($s < 10) {$s = "0" + $s};
    return {
      'hours': $h,
      'minutes': $m,
      'seconds':$s
    };
  }
  function updateTime(){
    var $t = getTime();
    $('.hours').text($t.hours);
    $('.minutes').text($t.minutes);
    $('.seconds').text($t.seconds);
    $r = parseInt($t.hours, 16)
    $g = parseInt($t.minutes, 16)
    $b = parseInt($t.seconds, 16)
    $rgb = "rgb("+$r+","+$g+","+$b+")"
  }
  setInterval(function(){
    updateTime();
    $('body').css("background-color", $rgb );
  }, 1000);
});

---

This awesome jQuery plugin is developed by FelixLehmannBLN. For more Advanced Usages, please check the demo page or visit the official website.