Javascript: Analog Clock

[TcM]

This is the code for an analog clock once I found! But yesterday I saw it on littlefranciscan website

<p>                     <script language="JavaScript">
                           
                           //Analog clock script- By Kurt (kurt.grigg@virgin.net)
                           //Script featured on Dynamic Drive
                           //Visit http://www.dynamicdrive.com for this script and more
                           
                           fCol='444444'; //face colour.
                           sCol='FF0000'; //seconds colour.
                           mCol='444444'; //minutes colour.
                           hCol='444444'; //hours colour.
                           
                           Ybase=40; //Clock height.
                           Xbase=40; //Clock width.
                           
                           
                           H='...';
                           H=H.split('');
                           M='....';
                           M=M.split('');
                           S='.....';
                           S=S.split('');
                           NS4=(document.layers);
                           NS6=(document.getElementById&&!document.all);
                           IE4=(document.all);
                           Ypos=0;
                           Xpos=0;
                           dots=12;
                           Split=360/dots;
                           if (NS6){
                           for (i=1; i < dots+1; i++){
                           document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
                           }
                           for (i=0; i < M.length; i++){
                           document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
                           }
                           for (i=0; i < H.length; i++){
                           document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
                           }
                           for (i=0; i < S.length; i++){
                           document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
                           }
                           }
                           if (NS4){
                           dgts='1 2 3 4 5 6 7 8 9 10 11 12';
                           dgts=dgts.split(' ')
                           for (i=0; i < dots; i++){
                           document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
                           }
                           for (i=0; i < M.length; i++){
                           document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
                           }
                           for (i=0; i < H.length; i++){
                           document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
                           }
                           for (i=0; i < S.length; i++){
                           document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
                           }
                           }
                           if (IE4){
                           document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
                           for (i=1; i < dots+1; i++){
                           document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
                           }
                           document.write('</div></div>')
                           document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
                           for (i=0; i < M.length; i++){
                           document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
                           }
                           document.write('</div></div>')
                           document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
                           for (i=0; i < H.length; i++){
                           document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
                           }
                           document.write('</div></div>')
                           document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
                           for (i=0; i < S.length; i++){
                           document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
                           }
                           document.write('</div></div>')
                           }
                           
                           
                           
                           function clock(){
                           time = new Date ();
                           secs = time.getSeconds();
                           sec = -1.57 + Math.PI * secs/30;
                           mins = time.getMinutes();
                           min = -1.57 + Math.PI * mins/30;
                           hr = time.getHours();
                           hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
                           
                           if (NS6){
                           Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
                           Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
                           for (i=1; i < dots+1; i++){
                           document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)
                           document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)
                           }
                           for (i=0; i < S.length; i++){
                           document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec);
                           document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec);
                           }
                           for (i=0; i < M.length; i++){
                           document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min);
                           document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min);
                           }
                           for (i=0; i < H.length; i++){
                           document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs);
                           document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs);
                           }
                           }
                           if (NS4){
                           Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
                           Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
                           for (i=0; i < dots; ++i){
                           document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
                           document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
                           }
                           for (i=0; i < S.length; i++){
                           document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
                           document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
                           }
                           for (i=0; i < M.length; i++){
                           document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
                           document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
                           }
                           for (i=0; i < H.length; i++){
                            document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
                            document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
                            }
                           }
                           
                           if (IE4){
                           Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20;
                           Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20;
                           for (i=0; i < dots; ++i){
                            ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
                            ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
                            }
                           for (i=0; i < S.length; i++){
                            x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
                            x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
                            }
                           for (i=0; i < M.length; i++){
                            y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
                            y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
                            }
                           for (i=0; i < H.length; i++){
                            z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
                            z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
                            }
                           }
                           setTimeout('clock()',100);
                           }
                           clock();
                           //-->
                           </script>
                           <!-- End Analog Clock  -->
                           <!--"''"-->

Hope it helped!

[xtraze]

I think I saw it on a website and I forgot the name,.. Once I got this mixed up with some other things and had some trouble. So, be carefull guys. I think this code can be better than the one I used. Thank you lol Really nice. I have just tested it.

[TcM]

Originally Posted by xtraze

I think I saw it on a website and I forgot the name,.. Once I got this mixed up with some other things and had some trouble. So, be carefull guys. I think this code can be better than the one I used. Thank you lol Really nice. I have just tested it.

Welcome

If you have enough HTML experience nothing will get mixed up! but yes as it is a long code you might get thing mixed up if you don't pay attention

[xtraze]

Well, I may have. I think a white or similarly bright background suits this well and therefor it can be on Codecall !! only if the Admins like it to be. lol. Works on

IE7
FF2

for me. I didn't check with Opera.

[TcM]

The Hour and Minute Hand, doesn't seem to work with Opera!

[xtraze]

Not a BIG problem as most still use Internet Explorer and after that. It's Firefox. Only a few may use Opera and it won't be a BIG problem dude.

[sahar88]

thank you .........

[spirates]

Hey, really nice clock i must say

But I need help :S.. Is it possible if someone kind here could make the clock in the left corner instead of the right corner? Or maybe tell me how to change it myself..

[Xav]

This is an old thread, spirates, and should not be revived. Post the question in the correct forum.

*Thread Closed* - to the best of my ability.

[spirates]

cant you help me :<?