juqery 圆周练习
<head>
<style lang="">
body {
margin: 0;
}
#sun {
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.ball {
width: 50px;
height: 50px;
background-color: hsl(360, 100%, 50%);
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
</style>
</head>
body代码如下
<body>
<div id="sun"></div>
</body>
script
<script>
var centerX = document.documentElement.clientWidth / 2;
var centerY = document.documentElement.clientHeight / 2;
var r = 200;
var ballNumber = 12;
var angleSpace = 360/ballNumber;
for (var i = 0; i < ballNumber; i++) {
var ball = document.createElement("div");
ball.classList.add("ball");
var x = centerX + r * Math.cos(i * angleSpace / 180 * Math.PI);
var y = centerY + r * Math.sin(i * angleSpace / 180 * Math.PI);
ball.style.left = x + "px";
ball.style.top = y + "px";
ball.style.backgroundColor = "hsl(" + i * angleSpace + ", 100%, 50%)";
document.body.appendChild(ball);
}
var balls = document.getElementsByClassName("ball");
var angle = 0;
function move(){
angle += 3;
for(var i = 0;i<ballNumber;i++){
var ball = balls[i];
var x = centerX + r * Math.cos((angle + i * angleSpace)/180*Math.PI);
var y = centerY + r * Math.sin((angle + i * angleSpace)/180*Math.PI);
ball.style.left = x + "px";
ball.style.top = y + "px";
}
requestAnimationFrame(move);
}
requestAnimationFrame(move);
</script>
效果如下所示