本文主要是介绍运用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实现物体的圆周运动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!