javascript圆圈轨迹运动

【Javascript】

下载

新闻

文章

javascript圆圈轨迹运动

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>javascript圆圈轨迹运动</title>
    <style>
        .circle{background-color:#999;width:40px;height:40px;border-radius:20px;position:absolute;top:0;left:0;margin:-20px}
        .li{position: absolute;width: 2px;height:2px;background-color: #000}
    </style>
    <script type="text/javascript">
        function test(){
            var id = document.getElementById("circle");
            var loop = function(radian){
                var i=radian%360;
                var cos = Math.cos(i*Math.PI/180);
                var sin = Math.sin(i*Math.PI/180);
                var r = 200;
                var y = cos*r + r;
                var x = sin*r + r;
                id.style.top = y + "px";
                id.style.left = x + "px";
                if(radian<360){
                    var div=document.createElement("div");
                    div.className="li";
                    div.style.top = y + "px";
                    div.style.left = x + "px";
                    document.body.appendChild(div);
                }
                setTimeout(function(){
                    radian+=1;
                    loop(radian);
                },70);
            };
            loop(0);
        }
        setTimeout(function(){test()},500);
    </script>
</head>
<body>
    <div class="circle" id="circle"></div>
</body>
</html>