Simple Clock in a Div

Ok, I'll admit it isn't something I would do on most sites, however I wanted to have a "dashboard" feel to this technical blog.

The Date / Time clock you see on the top-right of every page on this site isn't a Joomla extension. 

One of the things I like about Joomla is if you just want to do X on a site you don't have to make a custom MVC component with a manifest XML file and blah blah blah...

So, in the template's index.php itself (oh, the sacrilege!) I slipped this piece of code above the rhs positions:

I also added an onload to the body, which could be a generic js init or handled in other ways:

In the template's js file I have:

month=new Array('January','February','March','April','May',
          'June','July','August','September',
          'October','November','December');
weekday=new Array("Sunday","Monday","Tuesday",
        "Wednesday","Thursday","Friday","Saturday");
clock=0;

function zeroPad(i) {
if (i<10) { i="0" + i; }
return i;
}    
function startTime() {
    var today=new Date();
    var mo=today.getMonth();
    var d=today.getDate();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    var mer="am";
    if (h==0) { h=12;    }
    if (h>12) {    h=h-12;    mer="pm"; }
    m=zeroPad(m);
    s=zeroPad(s);
    document.getElementById('clock').innerHTML=

      weekday[today.getDay()]+", "+

      month[mo]+" "+d+"  "+h+":"+m+":"+s+" "+mer;
    t=setTimeout('startTime()',500);
}

Finally, a piece of CSS styles the div, in the template's sheet I have:

.clock {
    font-size:1.2em;
    color:#233;
    float:right;
    text-align:right;
    line-height:110%;
}