Javascript Customizable Live Clock Script!

Description: With this javascript you can show the time where ever the code is inserted into your webpage. I originally programmed this as a text only live clock. On August 4th 2008, I added the ability use images as well. Since I'm not an artist, I made simple graphics for this demo which you can download here.
Features: Using CSS you can control font type, color, size, bold, italics, status bar window on/off, Background Color of the text. And even a background image. Works with IE, and Mozilla Firefox.

Last Update: Monday, August 25th 2008. If you downloaded the script before this date 10,11, 12, am/pm didn't work, plus the html showed in the status bar if you were using images. Opppppss!! Sorry bout that! Works now!

Demo:
Instructions: Instructions: Copy / Paste the code below where you want the clock to display.

Click Here to Copy contents to your Clipboard
<script language=javascript> <!--// //live clock javascript //script written by Jason J. Russo //more free scripts: http://thescriptcenter.com //Edit the following variables below. /* IF USING IMAGES SET usimage to 1 and set the path to each image in the array below */ //use images var usimage = "1"; //images if above is set to 1. var clkimg = new Array(); clkimg[0] = new Image(); clkimg[0].src = "/demos/javascript/live_clock/0.gif"; clkimg[1] = new Image(); clkimg[1].src = "/demos/javascript/live_clock/1.gif"; clkimg[2] = new Image(); clkimg[2].src = "/demos/javascript/live_clock/2.gif"; clkimg[3] = new Image(); clkimg[3].src = "/demos/javascript/live_clock/3.gif"; clkimg[4] = new Image(); clkimg[4].src = "/demos/javascript/live_clock/4.gif"; clkimg[5] = new Image(); clkimg[5].src = "/demos/javascript/live_clock/5.gif"; clkimg[6] = new Image(); clkimg[6].src = "/demos/javascript/live_clock/6.gif"; clkimg[7] = new Image(); clkimg[7].src = "/demos/javascript/live_clock/7.gif"; clkimg[8] = new Image(); clkimg[8].src = "/demos/javascript/live_clock/8.gif"; clkimg[9] = new Image(); clkimg[9].src = "/demos/javascript/live_clock/9.gif"; clkimg[10] = new Image(); clkimg[10].src = "/demos/javascript/live_clock/am.gif"; clkimg[11] = new Image(); clkimg[11].src = "/demos/javascript/live_clock/pm.gif"; clkimg[12] = new Image(); clkimg[12].src = "/demos/javascript/live_clock/colon.gif"; //height of clock in pixels// var height = 30; //width of clock in pixels// var width = 155; /* IF TEXT ONLY CLOCK edit the following */ //Border width. var border = "0"; //Border Color. if above set to 1. var border_color = "#FFFFFF"; //font face example: arial,verdana,tahoma var fface="courier"; //font size. In Pixels. Example 10 - 12. var fsize="15"; //font color var fcolor="red"; //bold text. Set to 1 if true 0 if false; var b = "1"; //italics text. Set to 1 if true 0 if false; var i = "0"; //background color. var bgcolor = "#000000"; //background image var background_image = ""; // Set to 1 if you wish to show time in status bar as well. var statusbaron = "1"; /* Do Not Edit Below This Line Unless you know what you're doing. Or even if you don't know what you're doing but you feel like experimenting. */ var style = ""; if(height) { style += "height:" + height + "px;"; } if(width) { style += "width:" + width + "px;"; } if(border) { style += "border:solid " + border_color + " " + border + "px;"; } if(fface) { style += "font-family:" + fface + ";"; } if(fsize) { style += "font-size:" + fsize + "px;"; } if(fcolor) { style += "color:" + fcolor + ";"; } if(b == "1") { style += "font-weight:bold;"; } if(i == "1") { style += "font-style:italic;"; } if(bgcolor) { style += "background-color:" + bgcolor + ";"; } if(background_image) { style += "background-image: url('" + background_image + "');"; } style += "text-align:center;"; var bsr = navigator.appName; var ntype = ""; ntype = "button"; //alert(style); document.write('<span id="jtime" '); document.write('style="' + style); document.write('"></span>'); function simp_clock(){ var curdate=new Date(); var hours=curdate.getHours(); var minutes=curdate.getMinutes(); var seconds=curdate.getSeconds(); var ampm="AM"; if(usimage == 1) { ampm=10; } if (hours>=12){ ampm="PM"; if(usimage == 1) { ampm=11; } } if (hours>=13) { hours-=12 } if(hours == 0 && usimage != 1) { hours = 12; } if (minutes<10) { minutes="0"+minutes; } minutes+=""; if (seconds<10) { seconds="0"+seconds; } seconds+=""; /*testing */ //hours=11; var show_time; if(usimage == 1) { show_time = "<img name=hours1 id=hours1 style='display:none;'><img name=hours><img name=colon><img name=minutes><img name=minutes1><img name=colon1><img name=sec><img name=sec1> <img name=ampm>"; } else { show_time=hours+":"+minutes+":"+seconds+" "+ampm; } //document.jtime.time2.value=show_time; document.getElementById("jtime").innerHTML = show_time; if(usimage == 1) { document.images['ampm'].src=clkimg[ampm].src; if(hours == 0) { document.images['hours1'].src=clkimg[1].src; document.getElementById('hours1').style.display = ''; document.images['hours'].src=clkimg[2].src; } else if(hours >= 10) { hours += ''; var hours1 = hours.substr(1,1); document.images['hours1'].src=clkimg[1].src; document.getElementById('hours1').style.display = ''; document.images['hours'].src=clkimg[hours1].src; //alert(hours); } else { document.images['hours'].src=clkimg[hours].src; document.getElementById('hours1').style.display = 'none'; } document.images['colon'].src=clkimg[12].src; document.images['colon1'].src=clkimg[12].src; //split minutes in 2 load appropriate images..// var min1 = minutes.substr(0,1); document.images['minutes'].src=clkimg[min1].src; min1 = minutes.substr(1,1); document.images['minutes1'].src=clkimg[min1].src; var sec1 = seconds.substr(0,1); document.images['sec'].src=clkimg[sec1].src; sec1 = seconds.substr(1,1); document.images['sec1'].src=clkimg[sec1].src; } //alert(ampm); if(statusbaron && usimage != 1) { window.status = show_time; } setTimeout("simp_clock()",1000); } simp_clock(); //--> </script>