Date & Time Effects >>> Digital Clock.
 
Script Categories













Date & Time >>> Digital Clock.

Displays the time like a real digital clock. Changes rapidly and includes hours, minutes, seconds and AM/PM indication.

Step 1: Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
var dn;
c1 = new Image(); c1.src = "c1.gif";
c2 = new Image(); c2.src = "c2.gif";
c3 = new Image(); c3.src = "c3.gif";
c4 = new Image(); c4.src = "c4.gif";
c5 = new Image(); c5.src = "c5.gif";
c6 = new Image(); c6.src = "c6.gif";
c7 = new Image(); c7.src = "c7.gif";
c8 = new Image(); c8.src = "c8.gif";
c9 = new Image(); c9.src = "c9.gif";
c0 = new Image(); c0.src = "c0.gif";
cb = new Image(); cb.src = "cb.gif";
cam = new Image(); cam.src = "cam.gif";
cpm = new Image(); cpm.src = "cpm.gif";
function extract(h,m,s,type) {
if (!document.images) return;
if (h <= 9) {
document.images.a.src = cb.src;
document.images.b.src = eval("c"+h+".src");
}
else {
document.images.a.src = eval("c"+Math.floor(h/10)+".src");
document.images.b.src = eval("c"+(h%10)+".src");
}
if (m <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+m+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(m/10)+".src");
document.images.e.src = eval("c"+(m%10)+".src");
}
if (s <= 9) {
document.g.src = c0.src;
document.images.h.src = eval("c"+s+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(s/10)+".src");
document.images.h.src = eval("c"+(s%10)+".src");
}
if (dn == "AM") document.j.src = cam.src;
else document.images.j.src = cpm.src;
}
function show3() {
if (!document.images)
return;
var Digital = new Date();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
dn = "AM";
if ((hours >= 12) && (minutes >= 1) || (hours >= 13)) {
dn = "PM";
hours = hours-12;
}
if (hours == 0)
hours = 12;
extract(hours, minutes, seconds, dn);
setTimeout("show3()", 1000);
}
window.onload=show3;
//  End -->
</script>
<img height=21 src="cb.gif" width=16 name=a>
<img
height=21 src="cb.gif" width=16 name=b>
<img
height=21 src="colon.gif" width=9 name=c>
<img
height=21 src="cb.gif" width=16 name=d>
<img
height=21 src="cb.gif" width=16 name=e>
<img
height=21 src="colon.gif" width=9 name=f>
<img
height=21 src="cb.gif" width=16 name=g>
<img
height=21 src="cb.gif" width=16 name=h>
<img
height=21 src="cam.gif" width=16 name=j>

Step 2: The script uses 14 images as part of its interface. You can create your own, or use the 14 below:

(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©