圆周运动js

最新推荐文章于 2024-07-25 19:32:28 发布

原创最新推荐文章于 2024-07-25 19:32:28 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript知识点专栏收录该内容

11 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>circlar movement</title>
   <style type="text/css">
       #circle{width:30px;height:30px;position: absolute;background-color: lightgreen;left:600px;top:250px;border-radius: 50%;}
   </style>
   <script type="text/javascript">
       window.onload=function(){
           var oCircle=document.getElementById('circle');
           var x=500;
           var y=200;
           var r=100;
           var num=0;
           setInterval(function(){

               num++;
               a=Math.sin(num*(Math.PI/180))*r;
               b=Math.cos(num*(Math.PI/180))*r;
               oCircle.style.left=x+b+'px';
               oCircle.style.top=y+a+'px';
           },35);
       }

   </script>
</head>
<body>
   <div id="circle"></div>
</body>
</html>