JS 如何实现表盘秒钟匀速圆周运动

自己做的倒计时 , 因为是新手. 所以不怎么会, 只能让小圆一秒动一下, 但是想让秒钟缓动, 看网上的源代码看不懂,  主要自己写的代码太乱, 会导致小圆乱动
========一秒动一次===========
//=========小圆开始
 function roundMoon(){
            var second = document.getElementById("roundCircle");
 

 var today = new Date();
 var sSecond = today.getSeconds();
 var mSecond = today.getMilliseconds();
 
 var i = sSecond * 6 ;
 
 second.style.transform = "rotate("+ i +"deg)";
 
 t=setTimeout(function(){roundMoon()},150);


        }
//=========小圆结束

-------------------匀速]运动-------------------
/=========小圆开始
 function roundMoon(){
            //圆周运动js实现
            var circle= $("#roundCircle");
            var rect=$("#Circle");
         
            //获取半径和圆心
            var centerX=(rect.width()-circle.width())/2;
            var centerY=(rect.height()-circle.height())/2;
            var radius=centerX;
            //时间递进
 var today = new Date();
 var times=today.getSeconds() + today.getMilliseconds()/1000 ;
            //重绘位置

                var hudu=(2*Math.PI/360)*times*6;
                //console.info(hudu);
                var x=centerX+Math.sin(hudu)*radius;
                var y=centerY+Math.cos(hudu)*radius;
                x = parseFloat(x.toFixed(2));
                y = parseFloat(y.toFixed(2)); circle.css({
                    left:x,
                    top:y
                });               console.log(x+ "---" + y);
            //启动定时器
            t=setTimeout(function(){roundMoon()},100);

        }
------------------------这里是源码---------------------------<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script >

function myFunction()
{

var today = new Date();
var lhh = checkTime(23 - today.getHours());
var lmm = checkTime(59 - today.getMinutes()); 
var lss = checkTime(59 - today.getSeconds());

document.getElementById("leftbox").innerHTML = lhh;
document.getElementById("rightbox").innerHTML = lmm;
document.getElementById("ctext").innerHTML = lss;



t=setTimeout(function(){myFunction()},10);
roundMoon();


}


//检查 时间是否小于10 小于10在前面加0
function checkTime(i){
if (i < 10){
i = "0" + i;
}
return i;
}


// 秒钟淡入淡出效果
function opacity(){
var today = new Date();
var lss = today.getSeconds();
var lms = today.getMilliseconds();


// $("#centerbox").fadeToggle(500);
//通过控制css设置淡入淡出效果， 把毫秒转化成透明度 从而达到有规律透明效果
if(lms <= 499){
document.getElementById("ctext").style.opacity = lms *0.002;
document.getElementById("roundCircle").style.opacity = lms *0.002;
}else{
document.getElementById("ctext").style.opacity = 1 - ((lms-500)/500);
document.getElementById("roundCircle").style.opacity = 1 - ((lms-500)/500);
}


//每隔10ms运行一次opacity函数
t=setTimeout(function(){opacity()},10);


}
//-========end

//=========小圆开始
 function roundMoon(){
            //圆周运动js实现
            var circle= $("#roundCircle");
            var rect=$("#Circle");
         
            //获取半径和圆心
            var centerX=(rect.width()-circle.width())/2;
            var centerY=(rect.height()-circle.height())/2;
            var radius=centerX;
            //时间递进
 var today = new Date();
 var times=today.getSeconds() + today.getMilliseconds()/1000 ;
            //重绘位置

                var hudu=(2*Math.PI/360)*times*6;
                //console.info(hudu);
                var x=centerX+Math.sin(hudu)*radius;
                var y=centerY+Math.cos(hudu)*radius;
                x = parseFloat(x.toFixed(2));
                y = parseFloat(y.toFixed(2)); circle.css({
                    left:x,
                    top:y
                });               console.log(x+ "---" + y);
            //启动定时器
            t=setTimeout(function(){roundMoon()},100);

        } //=========小圆结束
</script>
<style>


body{
background-color: white;

}

.shadow{
width:100%;
background-color: #white;
margin: auto;

}
#insidebox{
position: relative;
margin: 0 auto;
width:956px;
height: 633px;
border-radius: 47px;
background-color: #DAEDE5;
box-shadow: 0px 8px 13px 0px rgba(0,0,0,0.1);

}

#topbox{
/* border: 1px solid red;*/
height: 104px;

}
/* 设置时间的字体和颜色*/
#ltime{
margin: 0 ;
text-align: center;/*水平居中*/
line-height: 104px;/*垂直居中 line-height = height*/
color: white;
font-family: Microsoft YaHei UI;
font-size: 53px;
}

#leftbox{
text-align: center;/*水平居中*/
line-height: 529px;/*垂直居中 line-height = height*/

color: white;
font-family: Microsoft YaHei UI;
font-size: 138px;

float:left;
/* border: 1px solid red;*/
width: 294px;
height: 529px;
}

#centerbox{
text-align: center;/*水平居中*/
line-height: 529px;/*垂直居中 line-height = height*/

/*字体属性*/
color: #8E9D97;
font-family: Microsoft YaHei UI;
font-size: 138px;
/*透明字体*/


/*边框属性*/
float:left;
/* border: 1px solid black;*/
width: 362px;
height: 529px;

}
#rightbox{
text-align: center;/*水平居中*/
line-height: 529px;/*垂直居中 line-height = height*/

color: white;
font-family: Microsoft YaHei UI;
font-size: 138px;

float:left;
/* border: 1px solid green;*/
width: 294px;
height: 529px;
}

#cCircle{
width: 312px;
height: 312px;
border-radius: 50%;
background-color: white;

/* border: 1px solid red;*/
}
#inCircle{

margin: -301px 0 0 11px;
width: 290px;
height: 290px;
border-radius: 50%;
background-color: #DAEDE5;

}

#Circle{
width: 312px;
height: 312px;
/* border: 1px solid red;*/
margin:auto;
position:absolute;
top:34%;
left:33.5%;
z-index: 1;

}
#ctext{

position:absolute;
left:41.6%;
z-index: 999;
}

/* 实现小圆点功能*/
#roundCircle{

width: 12px;
height: 12px;
background-color: #8E9D97;
border-radius: 50%;

position: absolute;
top:0px;
left: 156px;
/* 不好控制所以放弃
animation: run 0.1s linear infinite; 

此处表示圆心 50%+100% y轴和x轴 
transform-origin:66.5px 145.5px;
*/

}
/* 控制小球旋转

@keyframes run{
        from{
          transform:rotate(0deg);
        }
        to{
           transform:rotate(360deg);
        }
    }
*/

</style>
</head><body onLoad = "myFunction()">
<div style = "height: 50px"></div>
<div class = "shadow">
<div id = "insidebox">
<div id = "topbox">
<p id = "ltime" onClick="opacity()">TIME LEFT</p>
</div>
<div id = "leftbox" onClick = "roundMoon()">
18
</div>
<div id = "centerbox">
<!--秒钟 Ctext-->
<div id = "ctext"></div>
<!--外圆 cCircle-->
<div id ="Circle">
<div id = "cCircle">
<div id = "roundCircle"></div>
</div>
<div id = "inCircle"></div>
</div>
<!--圆结束-->
</div>

<div id = "rightbox">59</div>
</div>
</div>
</body>
</html>