小球的圆周运动js写法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
#wrap {
position: relative;
width: 498px;
height: 498px;
margin: 50px auto 0;
border: 1px solid #bbb;
border-radius: 50%;
line-height: 500px;
text-align: center;
font-size: 12px;
font-weight: bolder;
}
#wrap span {
position: absolute;
top: -5px;
left: 245px;
width: 10px;
height: 10px;
background-color: pink;
border-radius: 50%;
}
#shadow {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
}
#shadow span {
width: 6px;
height: 6px;
}
</style>
</head>
<body>
<div id="wrap">
这是外面的大圆
<span></span>
</div>
<script>
// 获取元素
let oSpan = document.querySelector('span');
// 信号量
let r = 250;//大圆半径
let startDeg = 0;//弧度
//开启定时器
setInterval(function () {
startDeg += 2 //步长
let rad = startDeg / 360 * 2 * Math.PI; //角度值转弧度制
let x = Math.sin(rad) * r;
let y = Math.cos(rad) * r;
//定位值
let _left = x + r - 5;
let _top = r - y - 5;
oSpan.style.left = _left + 'px';
oSpan.style.top = _top + 'px'
}, 1000 / 60)//1秒钟60帧 时间
</script>
</body>
</html>
网友评论