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.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmldigitalwatch.php.

This page has been viewed 1056 times. It was last viewed on Thu 25 Apr, 2024 at 23:59