Uncle Jim's Web Designs: Shadow Clock Effect

Uncle Jim's Web Designs

Shadow Clock

Author: Jim Stiles

This is a clock script that produces a shadow effect.
Here's the Script:

COPY

function init(){
if (document.all){
tim2.style.left=tim1.style.posLeft;
tim2.style.top=tim1.style.posTop+tim1.offsetHeight-8;
settimes();
}
}

function settimes(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
if (hours<10)
hours="0"+hours;
if(mins<10)
mins="0"+mins;
if (secs<10)
secs="0"+secs;
tim1.innerHTML=hours+":"+mins+":"+secs
tim2.innerHTML=hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960);
}
//--></script>
<style type="text/css"></style>
<body onLoad="init()">

Here are some instructions for using the shadow clock:

1. Moving the display:
- Simply change the values of top and left in the first Div tag.

2. Changing fonts:
- In the Cascading Style Sheet definition change the appropriate value :
    -- font-family : defines the font. (Example : font-family: Arial;)
    -- font-size : defines the size of the font. (Example : font-size: 26pt;)
    -- color: Defines the color of the font (Hexadecimal value). (Example : color: #FF0000)