当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS代码实现圆周运动

JS代码实现圆周运动

2018年10月17日  | 移动技术网IT编程  | 我要评论

js代码实现圆周运动

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#circle{
				position: relative;
				width: 300px;
				height: 300px;
				background: #f2f2f2;
				border-radius: 50%;
			}
			#ball{
				position: absolute;
				width: 10px;
				height: 10px;
				margin-left: -5px;
				margin-top: -5px;
				background: red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<p id="circle">
			<p id="ball"></p>
		</p>
		<script type="text/javascript">
			var ocircle = document.getelementbyid("circle");
			var oball = document.getelementbyid("ball");
			
			var r = ocircle.offsetwidth/2;
			var angle = 0;
			
			var timer = setinterval(function(){
				angle++;
				var hd = math.pi/180*angle;
				
				var x = r*math.cos(hd);
				var y = r*math.sin(hd);
				
				oball.style.left =r+ x + "px";
				oball.style.top =r- y + "px";
				
				
			},30)
			
			
		</script>
	</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网