Binary Clock

You may have noticed one of these moving dot things on the front page. It is a clock. You read it reading each column as a binary number.

These numbers indicate, from left to right, HH MM SS - hours, minutes and seconds.

The idea for this is not original although I can't remember where I saw it. I wrote a bit of javascript to implement it.

The source

Or see the file stephen-hart.net/scripts/clock.js.

var redButton = new Image();
redButton.src = "images/bu_rftk.gif";
var greyButton = new Image();
greyButton.src = "images/bu_grftk.gif";

// override default location of images if required
function initTime(rbsrc,gbsrc)
{
    redButton.src = rbsrc;
    greyButton.src = gbsrc;
}

function showTime()
{
    // get the date time
    var t = new Date();
    var h = t.getHours();
    var m = t.getMinutes();
    var s = t.getSeconds();

    // fiddle the hours and minutes into useful bits
    var ht = Math.floor(h / 10);
    var hu = h % 10;
    var mt = Math.floor(m / 10);
    var mu = m % 10;
    var st = Math.floor(s / 10);
    var su = s % 10;

    // set the buttons
    document.ht1.src = (ht & 0x0001) ? redButton.src : greyButton.src;
    document.ht2.src = (ht & 0x0002) ? redButton.src : greyButton.src;

    document.hu1.src = (hu & 0x0001) ? redButton.src : greyButton.src;
    document.hu2.src = (hu & 0x0002) ? redButton.src : greyButton.src;
    document.hu3.src = (hu & 0x0004) ? redButton.src : greyButton.src;
    document.hu4.src = (hu & 0x0008) ? redButton.src : greyButton.src;

    document.mt1.src = (mt & 0x0001) ? redButton.src : greyButton.src;
    document.mt2.src = (mt & 0x0002) ? redButton.src : greyButton.src;
    document.mt3.src = (mt & 0x0004) ? redButton.src : greyButton.src;

    document.mu1.src = (mu & 0x0001) ? redButton.src : greyButton.src;
    document.mu2.src = (mu & 0x0002) ? redButton.src : greyButton.src;
    document.mu3.src = (mu & 0x0004) ? redButton.src : greyButton.src;
    document.mu4.src = (mu & 0x0008) ? redButton.src : greyButton.src;

    document.st1.src = (st & 0x0001) ? redButton.src : greyButton.src;
    document.st2.src = (st & 0x0002) ? redButton.src : greyButton.src;
    document.st3.src = (st & 0x0004) ? redButton.src : greyButton.src;

    document.su1.src = (su & 0x0001) ? redButton.src : greyButton.src;
    document.su2.src = (su & 0x0002) ? redButton.src : greyButton.src;
    document.su3.src = (su & 0x0004) ? redButton.src : greyButton.src;
    document.su4.src = (su & 0x0008) ? redButton.src : greyButton.src;

    // wait one second then do it again
    setTimeout(showTime, 1000);
}

Explanation

As you can see, it's pretty simple. Just generate the current date, divide it up into hours, minutes and seconds, divide them into tens and units, then check to see which bits are set. If the bit is set, use the red button; if it isn't, use the grey button. One second later, do the whole thing again.

Feel free to use it if you want. Look at the html source for this page to see how to arrange the buttons. Let me know if you come up with any mods or other cunning changes.

date

last updated
time