•

Check out our Community Blogs

Register and join over 40,000 other developers!

### Recent Blog Entries

• surajkumardotin

Student college project

• TopHatProductions115

The TXP-Network is coming back this July...

• moonvik

Java...

• phi

I love this community !

• JackJames

hi i am jack i am seo expert jack james would love you to read new post

# Animation Clock In Js

animation clock

2 replies to this topic

### #1 VakhoQ

VakhoQ

• 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. :-)

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

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