This might be a silly question -- but what browsers even HAVE status bars anymore, much less let you change what's in them from .js?
Figured I'd throw my hat into the ring on this one -- just so you can see even more different ways of doing it. It's actually better to learn as many different approaches as you can, then select the one that's best for you.
Which is why I'd start out with a pretty much empty HTML document with a warning behind a NOSCRIPT before even THINKING about scripting functionality. I'd also have the script in an external file so I don't have the headaches of seeing HTML and JS at the same time... or if I want to see them at the same time I can edit them in separate windows side-by-side! (which is WAY easier than the constant scrolling up and down garbage). Since in production code scripting usually has no blasted business in the HTML in the first place -- you might as well start at the finish line; it's just easier that way. Though I know most people for some weird reason don't seem to see it that way...
Since most modern browsers don't even show a status bar, much less let you change it's value, I'd probably change window.document.title instead. Save the existing title, and on update append the time to it. Also cute since it will show as the text on the tab.
Let's see... Yeah, here we go:
As with all my examples the directory:
is unlocked for easy access to the gooey bits and pieces. The Script itself:
Not too complex... but let's give you a general overview of what it's doing:
function make -- I added this so it's easier to generate the controls from the DOM, and since we make them ourselves it's easier to attach the onclick handlers and plug them into the parent as needed.
function padZero -- simple routine to make sure numbers are leading padded with zeros to however many places you need.
var textReplace -- is actually a function. We 'could' just use .textContent if we didn't care about legacy browsers (basically IE)... but detecting if textContent exists and then making this a function of the appropriate version results in a routine that's a hair faster when we're calling it than it would be if we ran that if statement inside the function every time.
function makeControl -- since the two controls share so much in common, and you might want other controls similar in nature, make a function to generate them that plugs in all the 'common' bits to 'make'.
function showTime -- pretty much what you had. I have the boolean variable "timer12" to say if it's 12 hour format, if false it's 24 hour. Again since nothing I use will even show 'status' anymore, I went with the TITLE instead.
var originalTitle -- saved so we can prepend it to the time.
var timer12 -- the bool to determine the time format.
var timerId -- the interval handler. I use setInterval instead of setTimeout so we don't have to waste time doing that inside showTime.
var controls -- just a container DIV for our control anchors. I'm using anchors since this is NOT a form; no matter how many scripttards do so, it is NOT correct to be using form elements for non-form actions. Anchor is much closer in terms of a generic interface element.
var swap1224 -- the anchor for changing the time format. We use makeControl to create it with the starting title, and attach our handler function. Said function simply does a textReplace on itself, swapping timer's value inside the same inline-evaluation used to determine if we should be showing "24" or "12". We then call showTime to immediately update the displayed time instead of waiting for the setInterval.
var updateStopStart -- the anchor for stopping and starting the counter updates. I like to set to an explicit "false" as not all browsers null a timer handler when you clear it -- if we start the timer it helps to immediately show it, since even that second delay can make users think it's busted. Finally it too does a text-replace based on the timer state so as to show the correct text inside the control.
Finally, I call showTime to immediately show the time, instead of waiting that full second.
... and it's all wrapped in a nice neat anonymous function so nothing it does will risk namespace collisions should you use this code alongside other scripts. I also pass 'document' to it as 'd' so we can save a few bytes on typing 'document' all the blasted time. (A trick I picked up from Google's codebase)
Hope this helps.