Geeky JavaScript Binary Clock

15:57.10 - Sunday 9th October 2005   (Link to This Entry)

OK, so we've all seen those Binary Clocks on ThinkGeek but I always felt the design wasn't geeky enough. Why have two columns of LEDs for the hours? It's a single incrementing integar, after all - not two of them!

Nonetheless, it spurred me to write what I consider a proper geek clock in JavaScript. It consists of three lines of 6 'LEDs', so that each line can represent a value from 0 to 63. Granted, this means that the last LED on the 'hour' line (32) will never be used, but you can't have everything. Hell, it would actually save in manufacturing costs if one was ever built since it requires fewer LEDs and less processing.

There are two parts to this - JavaScript and HTML. The JavaScript is as follows:

<SCRIPT language="JavaScript" TYPE="TEXT/JAVASCRIPT">
 function geektime() {
  var now=new Date();
  var clockOn =new Image(); clockOn.src ="gfx/clock1.gif";
  var clockOff=new Image(); clockOff.src="gfx/clock0.gif";
  var hh=now.getHours().toString(2);   while(hh.length!=6) { hh='0'+hh; }
  var mm=now.getMinutes().toString(2); while(mm.length!=6) { mm='0'+mm; }
  var ss=now.getSeconds().toString(2); while(ss.length!=6) { ss='0'+ss; }
  for(p=0;p<6;p++) {
   if(hh.charAt(p)=='1') { document['h'+p].src=clockOn.src; } else { document['h'+p].src=clockOff.src; }
   if(mm.charAt(p)=='1') { document['m'+p].src=clockOn.src; } else { document['m'+p].src=clockOff.src; }
   if(ss.charAt(p)=='1') { document['s'+p].src=clockOn.src; } else { document['s'+p].src=clockOff.src; }
  }
  setTimeout('geektime();',1000);
 }
</SCRIPT>

And the HTML (which goes wherever you want the clock to appear) is:

<TABLE CELLPADDING="0" CELLSPACING="1" BORDER="0">
<TR ALIGN="CENTER" VALIGN="MIDDLE">
 <TD><IMG NAME="h5" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="h4" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="h3" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="h2" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="h1" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="h0" SRC="gfx/clock0.gif"></TD>
</TR>
<TR ALIGN="CENTER" VALIGN="MIDDLE">
 <TD><IMG NAME="m5" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="m4" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="m3" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="m2" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="m1" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="m0" SRC="gfx/clock0.gif"></TD>
</TR>
<TR ALIGN="CENTER" VALIGN="MIDDLE">
 <TD><IMG NAME="s5" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="s4" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="s3" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="s2" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="s1" SRC="gfx/clock0.gif"></TD>
 <TD><IMG NAME="s0" SRC="gfx/clock0.gif"></TD>
</TR>
</TABLE>

You need to add ONLOAD="geektime();" to your BODY tag to start the whole thing off, but that's about it. Your images can be whatever you want - just insert the relevent paths into both the JavaScript and the HTML, and Bob's yer Auntie's live-in lover.

You should be able to see the clock ticking away at the top of this page. How long before some geek with a soldering iron actually makes one?