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!

Link directly to this page: http://www.mf2fm.com/rv/dhtmldigitalwatch.php

This page viewed 397 times. Last viewed Thu 17 May, 2012 at 15:33