Web Site Clocks
These scripts allow you to add a real-time
running clock on your website. You can choose from a standard digital clock, or a
more advanced custom clock using your own set of graphics for the numbers. Both scripts
originated from the JavaScript F.A.Q. at http://www.btinternet.com/~martin.webb/faq.html
and were modified and improved by 95Net.
- Standard Digital Clock - Ready
to go script. Place the text box anywhere on your web page, then simply copy and
paste the JavaScript between the <Head> tags of your HTML.
<FORM NAME="clock">
<INPUT NAME="face" TYPE="TEXT" VALUE="hh:mm:ss"
SIZE=8>
</FORM>
<script language="JavaScript">
<!--
updateClock( );
function updateClock( ) {
var time = new Date( );
var hours = time.getHours( );
var minutes = time.getMinutes( );
var seconds = time.getSeconds( );
if ( hours > 11 && hours < 13)
{
var meridian = "pm";hours=12
} else if ( hours >= 13) {
var meridian = "pm";hours=hours-12
} else {
var meridian = "am"
}
document.clock.face.value = ((hours < 10) ? '0' + hours : hours) +
':' + ((minutes < 10) ? '0' + minutes : minutes) +
':' + ((seconds < 10) ? '0' + seconds : seconds) + meridian;
setTimeout("updateClock( )",1000);
}
// -->
</script>
- Graphical Clock - An
enhanced version of the digital clock, this script only requires your own custom graphics.
You will need the numbers 0 through 12 saved as "0.gif", "1.gif",
etc.You will also need "am", "pm", and a colon as a seperator graphic,
called "sep.gif". Don't forget to change the height and width tags if necessary.
Note that the first line does NOT contain a width tag.
<script
language="JavaScript">
<!--
bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
if (bName == "Netscape" && bVer == 2) ver = "n2";
else if (bName == "Netscape" && bVer == 3) ver = "n3";
else if (bName == "Netscape" && bVer == 4) ver = "n4";
else if (bName == "Microsoft Internet Explorer" && bVer < 2) ver =
"n2";
else if (bName == "Microsoft Internet Explorer" && bVer ==2) ver =
"n3";
else if (bName == "Microsoft Internet Explorer" && bVer > 2) ver =
"n4";
if (ver != "n2") {
var time = new Date( );
var hours = time.getHours( );
var minutes = time.getMinutes( );
var seconds = time.getSeconds( );
document.write("<IMG SRC='0.gif' NAME='h' HEIGHT=25>");
document.write("<IMG SRC='sep.gif' HEIGHT=25
WIDTH=9>");
document.write("<IMG SRC='0.gif' NAME='m10' HEIGHT=25 WIDTH=20>");
document.write("<IMG SRC='0.gif' NAME='m1' HEIGHT=25 WIDTH=20>");
document.write("<IMG SRC='sep.gif' HEIGHT=25
WIDTH=9>");
document.write("<IMG SRC='0.gif' NAME='s10' HEIGHT=25 WIDTH=20>");
document.write("<IMG SRC='0.gif' NAME='s1' HEIGHT=25 WIDTH=20>");
document.write("<IMG SRC='0.gif' NAME='m' HEIGHT=25 WIDTH=30>");
image0 = new Image( );image0.src =
"0.gif";
image1 = new Image( );image1.src = "1.gif";
image2 = new Image( );image2.src = "2.gif";
image3 = new Image( );image3.src = "3.gif";
image4 = new Image( );image4.src = "4.gif";
image5 = new Image( );image5.src = "5.gif";
image6 = new Image( );image6.src = "6.gif";
image7 = new Image( );image7.src = "7.gif";
image8 = new Image( );image8.src = "8.gif";
image9 = new Image( );image9.src = "9.gif";
updateClockImage( );
function updateClockImage( ){
var time = new Date( );
var hours = time.getHours( );
var minutes = time.getMinutes( );
var seconds = time.getSeconds( );
if ( hours > 11 && hours < 13)
{
var meridian = "pm";hours=12
} else if ( hours >= 13) {
var meridian = "pm";hours=hours-12
} else {
var meridian = "am"
}
document.images['s1'].src =
eval("image" + ((time.getSeconds( ) % 10)) +".src");
document.images['s10'].src =
eval("image" + (Math.floor(time.getSeconds( ) / 10)) +".src");
document.images['m1'].src =
eval("image" + (time.getMinutes( ) % 10) +".src");
document.images['m10'].src =
eval("image" + (Math.floor(time.getMinutes( ) / 10)) +".src");
document.images['h'].src = ""+hours+".gif";
document.images['m'].src = ""+meridian+".gif";
setTimeout("updateClockImage( )",1000);
}
} else {
document.write("This clock only works with Netscape 3.0 and above and Microsoft
Internet Explorer 4.0");
}
//-->
</script>
Back to Web Tips |