SimplytheBest DHTML live clock with images script

SimplytheBest
Scripts

ASP scripts
PERL scripts
PHP scripts
JavaScripts & Ajax
Snippets
Online scripts

Ajax, DHTML
& JavaScripts

Animation
Background
Bookmarks
Buttons
Calculators
Cookies
Data handling
E-mail
Enhancements
Forms
Image rotation
Menus
Messages
Miscellaneous
Music
Password protection
Redirection
Scrollers
Tables
Time & date
Windows

Publishers
Add script
Account login
Publisher list

Sponsored links

Amazing Media Planner Software

Create your LOGO in just minutes!

Home > Scripts > DHTML scripts & JavaScripts > Time & date > Live clock with images

Live clock with images script

AUTHOR: Jeremy Proffitt
TYPE: Freeware
BROWSERS: IE 4+, IE 6+, NS 4+, NS 6+

A live clock with images, updated every minute.

EXAMPLE

1) Insert the following HTML code in the <BODY> section where you want the live clock to appear in the page.

2) Insert the following script right below the above HTML code in the <BODY> section of the page.

then copy (CTRL-C) & paste (CTRL-V)

<SCRIPT LANGUAGE="JavaScript"> // By Jeremy Proffitt // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ if (document.images) { digit1 = new Image; digit1.src = "clock_images/digit1.gif"; digit2 = new Image; digit2.src = "clock_images/digit2.gif"; digit3 = new Image; digit3.src = "clock_images/digit3.gif"; digit4 = new Image; digit4.src = "clock_images/digit4.gif"; digit5 = new Image; digit5.src = "clock_images/digit5.gif"; digit6 = new Image; digit6.src = "clock_images/digit6.gif"; digit7 = new Image; digit7.src = "clock_images/digit7.gif"; digit8 = new Image; digit8.src = "clock_images/digit8.gif"; digit9 = new Image; digit9.src = "clock_images/digit9.gif"; digit0 = new Image; digit0.src = "clock_images/digit0.gif"; digitam = new Image; digitam.src = "clock_images/digitam.gif"; digitpm = new Image; digitpm.src = "clock_images/digitpm.gif"; digitcolon = new Image; digitcolon.src = "clock_images/digitcolon.gif"; digitblank = new Image; digitblank.src = "clock_images/digitblank.gif"; } function UpdateClock(){ var time= new Date(); hours = time.getHours(); mins = time.getMinutes(); if (!document.images) return; digit = mins % 10; document.images.minsones.src=eval("digit"+digit+".src"); digit = (mins - (mins % 10))/10; document.images.minstens.src=eval("digit"+digit+".src"); if (hours > 12) document.images.ampm.src=digitpm.src; else document.images.ampm.src=digitam.src; if (hours > 12) hours = hours - 12; digit = hours % 10; document.images.hoursones.src=eval("digit"+digit+".src"); digit = (hours - (hours % 10))/10; document.images.hourstens.src=eval("digit"+digit+".src"); document.images.colon.src=digitcolon.src; setTimeout("UpdateClock()",30000); } UpdateClock(); </SCRIPT>

3) Download this ZIP file with the images required for the live clock, and unzip into the appropriate directory.

Have fun !

[BACK] [TOP]