JS 圆形排列碰到麻烦了~ _JavaScript

JS 圆形排列遇到麻烦了~！
不知道是哪里出了问题，求出的横坐标和纵坐标不对，
求指点，谢谢....

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function(){
    
    var oCon=document.getElementById('con');
    var oYuan=document.getElementById('yuan');

    var oYuanLeft=(oCon.offsetWidth-oYuan.offsetWidth)/2;
    var oYuanTop=(oCon.offsetHeight-oYuan.offsetHeight)/2;
    
    var start=0;//起始角度
    
    //圆半径    
    var r=oYuan.offsetWidth/2;
    
    //要排列的标签个数
    var oDivNum=oYuan.childNodes.length;
    
    //每个标签对应的角度
    var avd=360/oDivNum;
    
    //每个标签对应的弧度
    var X=avd*Math.PI/180;

    oYuan.style.left=oYuanLeft+'px';//设置圆的横坐标
    oYuan.style.top=oYuanTop+'px';//设置圆在纵坐标

    for(var i=0;i<oDivNum;i++){
        
        oYuan.childNodes[i].style.left=Math.sin(X*i)*r+oYuanLeft+'px';
        oYuan.childNodes[i].style.top=Math.cos(X*i)*r+oYuanTop+'px';
        
    }
    

};

</script>
</head>

<body>
<div id="con" style=" width:950px; height:400px; background-color:#bf0000; position:relative;">
    <div id="yuan" style="width:400px; height:400px; background-color:#000; position:absolute; left:0px; top:0px;">
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:8;">1</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:7;">2</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:6;">3</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:5;">4</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:4;">5</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:3;">6</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:2;">7</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:1;">8</div>
    </div>
</div>
</body>
</html>

------解决方案--------------------

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function(){
    
    var oCon=document.getElementById('con');
    var oYuan=document.getElementById('yuan');

    var oYuanLeft=(oCon.offsetWidth-oYuan.offsetWidth)/2;
    var oYuanTop=(oCon.offsetHeight-oYuan.offsetHeight)/2;
    
    var start=0;//起始角度
    
    //圆半径    
    var r=oYuan.offsetWidth/2;
    
    //要排列的标签个数
    var oDivNum=oYuan.childNodes.length;
    //每个标签对应的角度
    var avd=360/oDivNum;
    
    //每个标签对应的弧度
    var X=avd*Math.PI/180;

    oYuan.style.left=oYuanLeft+'px';//设置圆的横坐标
    oYuan.style.top=oYuanTop+'px';//设置圆在纵坐标
    
    var width = oYuan.offsetWidth;
    var height = oYuan.offsetHeight;
    
    var left = width / 2;
    var top = height / 2;
    
    for(var i=0;i<oDivNum;i++){
        if( oYuan.childNodes[i].nodeType == 3 ) continue;
        oYuan.childNodes[i].style.left=Math.sin(X*i)*r+left+'px';
        oYuan.childNodes[i].style.top=Math.cos(X*i)*r+top+'px';
    }
};

</script>
</head>

<body>
<div id="con" style=" width:950px; height:400px; background-color:#bf0000; position:relative;">
    <div id="yuan" style="width:400px; height:400px; background-color:#000; position:absolute; left:0px; top:0px;">
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:8;">1</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:7;">2</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:6;">3</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:5;">4</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:4;">5</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:3;">6</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:2;">7</div>
    <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:1;">8</div>
    </div>
</div>
</body>
</html>