圆周运动

Myth丶恋晨 2022-05-18 02:38 62阅读 0赞

<!doctype html>
    
    <html lang="en">
    
    <head>
    
    <meta charset="UTF-8">
    
    <title>圆周运动</title>
    
    <style>
    
    
    
    #box1{
    
    width:10px;
    
    height:10px;
    
    position: absolute;
    
    background:#f00;
    
    left:600px;
    
    top:300px;
    
    }
    
    .box0{
    
    height:2px;
    
    width:2px;
    
    background:#000;
    
    position:absolute;
    
    }
    
    </style>
    
    <script>
    
    window.onload=function(){
    
    var oBox1=document.getElementById('box1');
    
    var r=200;
    
    var num=0;
    
    var x=oBox1.offsetLeft - r;
    
    var y=oBox1.offsetTop;
    
    
    
    setInterval(function(){
    
    num++;
    
    a=Math.sin(num*(Math.PI/180))*r;
    
    b=Math.cos(num*(Math.PI/180))*r;
    
    var div = document.createElement('div');//创建一个div标签
    
    div.className = 'box0';//将className 为box0的样式赋给div
    
    document.body.appendChild(div);//添加到body
    
    
    
    oBox1.style.left = div.style.left = x+b+'px';
    
    oBox1.style.top = div.style.top = y+a+'px';
    
    },50);
    
    }
    
    
    
    </script>
    
    </head>
    
    <body>
    
    <div id="box1"></div>
    
    </body>
    
    </html>

圆周运动

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关计时器模仿地球绕太阳圆周运动

相关 cocos2dx精灵做正逆时针圆周运动

相关圆周运动