本文主要是介绍运用js实现物体的圆周运动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
运用js实现圆周运动，要注意三点：
1：物体运动的圆心
2：物体运动的半径
3：物体发生运动的速度
第一步：编写一个div 对div进行设置样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#div1{//对运动对象div进行一些基本的设置background:red;height:60px;width:60px;position:absolute;}</style>
</head>
<body><div id = "div1"></div>
</body>
</html>
这里注意的是要将div变为绝对定位，可以后期让它进行移动
第二步：
对div运动的路径进行设置
<script>window.onload = function(){var oDiv = document.getElementById('div1');var X = 300;//设置圆心var Y = 300 ;//设置圆心var r = 100 ; //半径为100var i = 0 ;先在script获取到div的id，X 的值将成为div中left的值 ,Y的值将作为div的top值，r为div运动的半径 ，
第三步，设置定时器 ，让div进行移动
setInterval(function(){i = i + 2 ;var radian = i *Math.PI /180; //计算角度var a = Math.sin(radian) *r; //根据三角函数公式计算var b = Math.cos(radian) *r; //根据三角形函数公式计算oDiv.style.left = X + a + 'px';oDiv.style.top = Y - b + 'px';}30）；
Math.PI为一个math方法 表示角度为180度，设置定时器（setInterval），每过30毫秒使定时器触发一次，var radian = i *Math.PI /180;计算出角度，用来计算下一次div出现的位置。
注意，div不是在一直移动，而是每过30毫秒变化一次位置，只是30毫秒的速度人眼分辨不出来
第四步，在div中运动中不断插入新的div，为新的div设置格式，主要是用来显示运动div的运动路径
var aDivs = document.createElement("div");aDivs.style.left = oDiv.offsetLeft + "px";aDivs.style.top = oDiv.offsetTop + "px";document.body.appendChild(aDivs);},30)//注 这里的30和上一步30为同一个30
插入新的div的样式
div{background:red;height:5px;width:5px;position:absolute;//绝对定位}
运动后的div的路径如图
这篇关于运用js实现物体的圆周运动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
