Binary Clock

by Robert Mochel

HTML

<div id="wrapper">
<div id="clock">
  <div id="hour_left"></div>
	<div id="hour_right"></div>
  <div id="minute_left"></div>
	<div id="minute_right"></div>
  <div id="second_left"></div>
	<div id="second_right"></div>
	<br style="clear: both;" />
  <div class="clock"></div>
</div>
  <div class="copyright">
     borrowed by RIM
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  font-family: Verdana;
  background: linear-gradient(0deg,#333 49%,#0f0,#999 51%);
}

#wrapper {
  height: 400;
  width: 400;
  margin: 0 auto;
  position: relative;
}

#hour_left, #hour_right, #minute_left, #minute_right, #second_left, #second_right {
  float: left;
	width: 20px;
	height: 80px;
}

#clock img {
  display: block;
  height: 50px;
  width: 50px;
}

#clock {
  text-align: center;
  height: 210px;
  width: 220px;
  font-size: 35px;
  position: absolute;
  top: 72px;
  color: #0f0;
  background: #fff;
  left: 46%;
  text-shadow: 0px 0px 3px #000;
  box-shadow: 0px 0px 10px #0f0;
}

.copyright {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 10px 20px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 10px #0f0;
  color: #fff;
  background: #222;
  border-radius: 10px 10px 0px 0px;
}

#love {
 color: green;
}

JavaScript

var intervalId1 = "";
var intervalId2 = "";
var intervalTime = 1000;

$(document).ready(function() {
  intervalId1 = setInterval("start_clock1()", intervalTime);
  intervalId2 = setInterval("start_clock2()",intervalTime);
});

var on = "<img src='http://codepen.myxotod.de/binary-clock/dot_on.jpg' alt='' />";
var off = "<img src='http://codepen.myxotod.de/binary-clock/dot_off.jpg' alt='' />";

function start_clock1() {
  var currentTime = new Date();
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();
  
  var zero = off+off+off+off;
  var one = off+off+off+on;
  var two = off+off+on+off;
  var three = off+off+on+on;
  var four = off+on+off+off;
  var five = off+on+off+on;
  var six = off+on+on+off;
  var seven = off+on+on+on;
  var eigth = on+off+off+off;
  var nine = on+off+off+on;
  
  switch (currentHours) {
    case 0:
      $('#hour_left').html(zero);
      $('#hour_right').html(zero);
    break;
    case 1:
      $('#hour_left').html(zero);
      $('#hour_right').html(one);
    break;
    case 2:
      $('#hour_left').html(zero);
      $('#hour_right').html(two);
    break;
    case 3:
      $('#hour_left').html(zero);
      $('#hour_right').html(three);
    break;
    case 4:
      $('#hour_left').html(zero);
      $('#hour_right').html(four);
    break;
    case 5:
      $('#hour_left').html(zero);
      $('#hour_right').html(five);
    break;
    case 6:
      $('#hour_left').html(zero);
      $('#hour_right').html(six);
    break;
    case 7:
      $('#hour_left').html(zero);
      $('#hour_right').html(seven);
    break;
    case 8:
      $('#hour_left').html(zero);
      $('#hour_right').html(eigth);
    break;
    case 9:
      $('#hour_left').html(zero);
      $('#hour_right').html(nine);
    break;
    case 10:
      $('#hour_left').html(one);
      $('#hour_right').html(zero);
    break;
    case 11:
      $('#hour_left').html(one);
     ...