RV's free DHTML and JavaScript effects :: Digital Clock or Watch that follows the mouse cursor

DIGITAL CLOCK
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 7+
04-Dec-2007: Updated to allow clock size to be changed. 22-Sep-2005: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var colour="#639"; // change the colour of the clock var clock_size=8; // change the size of the clock (range is from 4 to as big as you like!) /**************************** * Digital Clock Effect * (c)2005-7 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var clok; var cpos=0; var newx=xmo=400; var newy=ymo=300; window.onload=function() { if (document.getElementById) { clok=document.createElement("div"); clok.style.position="absolute"; clok.appendChild(createDigit("dig0")); clok.appendChild(createDigit("dig1")); clok.appendChild(createColon()); clok.appendChild(createDigit("dig2")); clok.appendChild(createDigit("dig3")); clok.appendChild(createColon("ms")); clok.appendChild(createDigit("dig4")); clok.appendChild(createDigit("dig5")); document.body.appendChild(clok); tick(); }} var digit=new Array(247, 146, 221, 219, 186, 235, 239, 210, 255, 251); function tick() { var now=new Date(); var t=Math.floor(now.getTime()/500)%2; var i, j, k; var won=oo(now.getHours())+oo(now.getMinutes())+oo(now.getSeconds()); for (i=0; i<6; i++) for (j=0; j<7; j++) { k=digit[won.substring(i, i+1)].toString(2).substring(j+1, j+2); document.getElementById("dig"+i+j).style.backgroundColor=(k==1)?colour:"transparent"; } document.getElementById("mstop").style.backgroundColor=(t)?"transparent":colour; document.getElementById("msbot").style.backgroundColor=(t)?"transparent":colour; xmo+=Math.floor((newx-xmo)/4); clok.style.left=Math.round(xmo-(clock_size+2)4)+"px"; ymo+=Math.floor((newy-ymo)/4); clok.style.top=Math.round(ymo-clock_size*2.5)+"px"; setTimeout("tick()", 40); } document.onmousemove=mouse; function mouse(e) { newy=(e)?e.pageY:event.y+scro(); newx=(e)?e.pageX:event.x; } function scro() { var scro=0; if (document.body.scrollTop) scro=document.body.scrollTop; else if (document.documentElement && document.documentElement.scrollTop) scro=document.documentElement.scrollTop; return (scro); } function oo(o) { return(((o<10)?"0"+o:o).toString()); } function createDigit(id) { var odiv=createDiv(0, cpos, clock_size+clock_size+2, clock_size+2, false); cpos+=clock_size+4; odiv.appendChild(createDiv(0, 1, 2, clock_size, id+"0")); odiv.appendChild(createDiv(1, 0, clock_size, 2, id+"1")); odiv.appendChild(createDiv(1, clock_size, clock_size, 2, id+"2")); odiv.appendChild(createDiv(clock_size, 1, 2, clock_size, id+"3")); odiv.appendChild(createDiv(clock_size+1, 0, clock_size, 2, id+"4")); odiv.appendChild(createDiv(clock_size+1, clock_size, clock_size, 2, id+"5")); odiv.appendChild(createDiv(clock_size+clock_size, 1, 2, clock_size, id+"6")); return (odiv); } function createColon(id) { var odiv=createDiv(0, cpos, clock_size+clock_size+2, 2, false); cpos+=4; var dot1=createDiv(4, 0, 3, 2, (id)?id+"top":false); dot1.style.backgroundColor=colour; odiv.appendChild(dot1); var dot2=createDiv(clock_size+clock_size-5, 0, 3, 2, (id)?id+"bot":false); dot2.style.backgroundColor=colour; odiv.appendChild(dot2); return (odiv); } function createDiv(top, left, height, width, id) { var div=document.createElement("div"); div.style.position="absolute"; div.style.top=top+"px"; div.style.left=left+"px"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; if (id) div.setAttribute("id", id); return (div); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: If you want to change the colour of the clock, change the colour at the start of the script you just copied to the setting you require.
THAT'S IT When your page loads, the digital clock should follow your mouse around, just like it does on this page.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...

[ This page viewed 3572 times. Last viewed Sat 19 Jul, 2008 at 19:51 ]