Jump to content




Recent Status Updates

  • Photo
      15 Nov
    duzamucha

    Hi, I am final year Interior Design Student from University of Huddersfield. I am currently working on my final major project which is going to be linked to coding. I was hoping that you could help me with my research. I have prepared a short survey, it would be a massive help if you could fill it in for me. It takes less than 2 minutes to complete, I promise. Here is the link: https://www.surveymonkey.com/s/73XLJKK Thank you so much in advance!

View All Updates

Developed by TechBiz Xccelerator
Photo
- - - - -

Javascript: Analog Clock

align clock

  • Please log in to reply
23 replies to this topic

#1 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7,563 posts

Posted 03 January 2007 - 04:37 AM

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!
  • -1

#2 xtraze

xtraze

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 872 posts

Posted 03 January 2007 - 07:23 AM

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.
  • 0

#3 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7,563 posts

Posted 03 January 2007 - 07:33 AM

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
  • 0

#4 xtraze

xtraze

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 872 posts

Posted 03 January 2007 - 07:56 AM

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.
  • 0

#5 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7,563 posts

Posted 03 January 2007 - 08:07 AM

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

#6 xtraze

xtraze

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 872 posts

Posted 03 January 2007 - 07:26 PM

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.
  • 0

#7 sahar88

sahar88

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 18 February 2007 - 06:59 PM

thank you .........
  • 0

#8 spirates

spirates

    CC Lurker

  • Just Joined
  • Pip
  • 8 posts

Posted 27 May 2008 - 08:51 AM

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..
  • 0

#9 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8,356 posts

Posted 27 May 2008 - 08:56 AM

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.
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#10 spirates

spirates

    CC Lurker

  • Just Joined
  • Pip
  • 8 posts

Posted 27 May 2008 - 10:13 AM

cant you help me :<?
  • 0

#11 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7,563 posts

Posted 27 May 2008 - 10:18 AM

Xav you should leave that for a mod :)

It's ok to post in old threads.
  • 0

#12 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8,356 posts

Posted 27 May 2008 - 10:23 AM

No, it isn't. In case you've forgotten, you infracted me for posting in an old thread. Out of the kindness of my heart, I'm steering spirates away from your cruel, merciless, virtual whip. OK?
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?





Also tagged with one or more of these keywords: align, clock

Powered by binpress