JS simulated circular motion and Math.PI Math.sin, () and Math.cos () with the use Detailed

Sine value Math.sin (x) x a. The return value between -1.0 and 1.0;
cosine Math.cos (x) x a. Returns a number between -1.0 and 1.0;
both functions of X are referring to "arc" instead of "angle" is calculated in radians: 2 * PI / 360 * angle;
30 [deg.] Angle rad = 2 * PI / 360 * 30

How to get the coordinates of each point on the circle?
Solution: The triangular sine cosine values come;
assuming a circle center coordinates (a, b), the radius is r,
then the circle at each point of
the X coordinate = a + Math.sin (2 * Math . the PI / 360) * R & lt; the Y
coordinate = b + Math.cos (2 * Math.PI / 360) * r; Note in the code minus sign -

How to get the clock of the second hand moves around the track?
Suppose the initial value of the second hand (start point) to 12 o'clock, the center coordinates (a, b).
Solutions: one minute 60 seconds, a circle of 360 °, so the angle of rotation per second of 360 ° / 60 = 6 °;

for ( var Times = 0; Times <60; Times ++ ) {
       var hudu = (2 * Math.PI / 360) * *. 6 Times;
        var X-Math.sin, = A + (hudu) * R & lt;
        var the Y = B - Math.cos (hudu) * r     //   note here is "-" sign, because we want to get Y is relative to the (0,0) terms. 
}

Reference: Math.PI and Math.sin () and Math.cos () with the use of Detailed

Case:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .main {
                width: 800px;
                height: 800px;
                background-color: black;
                position: relative;
                margin: auto;
                
            }
            .fix {
                width: 20px;
                height: 20px;
                background-color: red;
                border-radius: 50%;
                position: absolute;
                left: 390px;
                top: 270px;/*390 - 120：圆的12点方向*/
            }
            .show{
                width: 20px;
                height: 20px;
                background-color: lightseagreen;
                border-radius: 50%;
                position: absolute;
                left: 390px;
                top: 390px;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    </b). 
           Solutions: one minute 60 seconds, a circle of 360 °, so that a rotation angle [deg.] Per second of 360/60 =. 6 [deg.]; * /

    
        
            

            
            
                
            
        
    
    
            
        
                    
            var times = 0;
            var r = 120;// 圆形半径
            setInterval(function(){
                times ++ ;
                if(times > 60){
                    times = 0;
                }
                var hudu = (2 * Math.PI / 360) * 6 * times;
                var X = 390 + Math.sin, (hudu) * R & lt;
                 var Y =  390  - Math.cos (hudu) * R & lt //   note here is "-" sign, because we want to get with respect to Y (0,0) in terms of of. 
                $ ( " .Fix " ) .animate ({left: X- +  " PX " , Top: the Y +  " PX " }); 
            }, 1000 ); 
        }) 
    </ Script > 

</ HTML >

JS simulated circular motion and Math.PI Math.sin, () and Math.cos () with the use Detailed

Guess you like