Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Animation Clock In Js

animation clock

  • Please log in to reply
2 replies to this topic

#1 VakhoQ

VakhoQ

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 126 posts

Posted 28 May 2012 - 08:41 AM

It's simple Algorithm. I wrote this script and if you have any question you can wrote this. I wrote comments too. :-)
Posted Image

here is the link, you can test is:
http://vakho.comyr.com/clock.html

http://vakho.comyr.com/clock.html
<style type="text/css">
div.dig{
font-family:consolas;
position:absolute;
color:black;
font-size:13;
}
div.sec{
font-family:consolas;
position:absolute;
color:red;
font-weight:bold;
}
div.cut{
font-family:consolas;
position:absolute;
color:blue;
font-weight:bold;
}
div.sat{
font-family:consolas;
position:absolute;
color:green;
font-weight:bold;
}
</style>
<script>
var i, r=50;
	   /* ********************************************************
	   * DTR  Degree to Radian, JS  - use radians to calculate values of Sin, Cos	  *
	********************************************************* */
function DTR(x){  
return x*Math.PI/180;
}			
	   /* *************************************************************
	   * On circumference to find out (calculate) pixels   we use   Sin() Cos() (I mean, X, and Y) . We Know Degree *
	   *and Radius (Degree bewteen 12 and 3 is 30 and so on)  =>  we can find the X,Y using Degree and Sin, Cos*
	************************************************************** */
function clock()
{  

  
  
  for(i=0; i<=330; i+=30){  // Digits in The center
  document.getElementById("dig"+i/30).style.left=(r+5)*Math.sin(DTR(i));
  document.getElementById("dig"+i/30).style.top=-(r+5)*Math.cos(DTR(i));
  }  

  var ToDay=new Date();
  var SeC = ToDay.getSeconds();
  var MiN = ToDay.getMinutes();
  var SaT=  ToDay.getHours();
  
  for(i=1; i<=5; i++){  //  Seconds. 60*x=360 x=6 Degree  
  document.getElementById("sec"+(i-1)).style.left=(r-10*i+8)*Math.sin(DTR(SeC*6));
  document.getElementById("sec"+(i-1)).style.top=-(r-10*i+8)*Math.cos(DTR(SeC*6));
  }
  for(i=1; i<=5; i++){	// Minutes. 60*x=360 x=6 Degree
  document.getElementById("cut"+(i-1)).style.left=(r-10*i+8)*Math.sin(DTR(MiN*6));
  document.getElementById("cut"+(i-1)).style.top=-(r-10*i+8)*Math.cos(DTR(MiN*6));
  }
  for(i=1; i<=5; i++){	// Hours. 12*x=360 x=30 Degree
  if(i<3) continue;  // // To decrease lengh of arrow. Firs arrow is in the center , Second is above that and so on ...
  document.getElementById("sat"+(i-1)).style.left=(r-10*i+8)*Math.sin(DTR(SaT*30+6*(MiN/12))); // From the center (to circumference from 2 becouse when i=1 (50-10*1+8) ) point is going to center with +8 Px
  document.getElementById("sat"+(i-1)).style.top=-(r-10*i+8)*Math.cos(DTR(SaT*30+6*(MiN/12))); // is goint to center wit 10 px.  first is  48, then  -12 to radios and will became  38, then 28 'n so on...
  }
  

   /* ***  the sam Function BUT(!) points is going From the circumference to the center with  5-5 PX (Pixel)***
   for(i=1; i<=10; i++){  //  Seconds. 60*x=360 x=6 Degree
  document.getElementById("sec"+(i-1)).style.left=(r-5*i)*Math.sin(DTR(SeC*6));
  document.getElementById("sec"+(i-1)).style.top=-(r-5*i)*Math.cos(DTR(SeC*6));
  } for(i=1; i<=10; i++){	// Minutes. 60*x=360 x=6 Degree
  document.getElementById("cut"+(i-1)).style.left=(r-5*i)*Math.sin(DTR(MiN*6));
  document.getElementById("cut"+(i-1)).style.top=-(r-5*i)*Math.cos(DTR(MiN*6));
  } for(i=1; i<=10; i++){	// Hours. 12*x=360 x=30 Degree
  if(i<4) continue;  //  To Decrease Arrow. First point at the circumference second inside it and so on ...
  document.getElementById("sat"+(i-1)).style.left=(r-5*i)*Math.sin(DTR(SaT*30+6*(MiN/12)));
  document.getElementById("sat"+(i-1)).style.top=-(r-5*i)*Math.cos(DTR(SaT*30+6*(MiN/12)));
  }
  **************************************************************************************** */


	   /* ******************************************************************************* *
	   * TIME*30 - if  its X time , arrow will be at X while X+1 will not become. becouse ar X+1- TIME value will increase by 1*
	   *  ==> at (TIME+1)*30  will be  +30 Degree in Adition.							 *
	* IT's  X ocloc (time) arrow will be move asid with 6 Degree, each 12 minute, becouse 12*5=60		*
	* and  6 Degree becouse , 60*6 =360. ==> wi must add 6*Z to  Time*30  where Z[0-5];   *
	* ==>  Time*30+6*(MiN/12).														  *
	* ==>  Z=0 [0-12), Z=1 [12-24),  Z=2 [24-36),  Z=3 [36-48], Z=4 [48-60), Z=5[60]   *
	********************************************************************************** */
setTimeout('clock()',500);
}
</script>
<body onload="clock();" >
<div style="position:Relative; left:50px; top:50px ">
<script>
for(var i=0; i<=9; i++){	   // sec
document.write('<div  id="sec'+i+'"  class="sec">.</div>')
}
for(var i=0; i<=9; i++){	  // min
document.write('<div  id="cut'+i+'"  class="cut">.</div>')
}
for(var i=0; i<=9; i++){	  // hour
document.write('<div  id="sat'+i+'"  class="sat">.</div>')
}
</script>
</div>
<div style="position:Relative; left:48px; top:54px">
<script>
for(var i=0; i<=11; i++){
var k=i; if(i==0) k=12;
document.write('<div  id="dig'+i+'"  class="dig">'+k+'</div>');
}
</script>
</div>
<body>

<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://stats.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

  • 1
GNU/Linux Is the Best.

#2 VisCode

VisCode

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts
  • Programming Language:(Visual) Basic, Visual Basic .NET
  • Learning:C, C++, Objective-C, C#, Assembly

Posted 07 August 2012 - 02:31 PM

Can you explain your code ??
  • 0

#3 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 07 August 2012 - 06:38 PM

Check out the clock I just wrote:
http://forum.codecall.net/topic/71207-javascript-clock-gadget/


As for your clock, did you use <img> tags for the red, green, and blue dots? How did you position the numbers? Or did you use <canvas> too, like I did?
  • 0
Regards,
RR





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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download