极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
.js-circle-wrap{
position: absolute;
top: 100px;
left: 600px;
width: 400px;height: 400px;
border: 1px solid red;
border-radius: 50%;
}
.circle{
width: 50px;
height: 50px;
border-radius:50%;
position: absolute;
left: 0;top: 0;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="js-circle-wrap">
<div class="circle"></div>
</div>
</body>
<script src="./jquery-3.1.0.js"></script>
<script>
let wrap = document.querySelector('.js-circle-wrap');
let origX = parseInt(window.getComputedStyle(wrap,null).width)/2;
let origY = parseInt(window.getComputedStyle(wrap,null).height)/2;
let r = origX;
let circle = document.querySelector('.circle');
let circleR = parseInt(window.getComputedStyle(circle,null).width)/2;
let x,y;
let ang = 0;
setInterval(function(){
if (ang < 360){
ang += 0.1;
}else{
ang = 360;
}
x = parseInt(origX + r*Math.cos(ang) - circleR);
y = parseInt(origY + r*Math.sin(ang) -circleR);
circle.style.left = x + "px";
circle.style.top = y + "px";
},100);
</script>
</html>
