<!DOCTYPE html>
<html>
<head>
<style>
body {}
#container {
top: 10%;
left: 10%;
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 50%;
position: absolute;
}
#pointer {
position: absolute;
top: 0;
left: 150px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
</style>
</head>
<body>
<div id='container'>
<div id='pointer'></div>
</div>
<script>
var distance = 0;
function circle($w_rad, $h_rad, $angle) {
var temp_x = $w_rad * Math.cos($angle);
var temp_y = $h_rad * Math.sin($angle);
var point = new Object();
point.x = temp_x;
point.y = temp_y;
return point;
}
// id: 움직일 엘리먼트 아이디
// cx, cy: 원의 중심점
// w_rad, h_rad: 원의 가로 세로 반지름
function display($id, $cx, $cy, $w_rad, $h_rad) {
const degree = distance-90; // 12시 방향부터 시작
const radian = degree * Math.PI / 180;
const point = circle($w_rad, $h_rad, radian);
const x = Math.floor(point.x + $cx);
const y = Math.floor(point.y + $cy);
const pointer = document.querySelector(`#${$id}`);
let pw = pointer.clientWidth/2; // 엘리먼트의 중심점x
let ph = pointer.clientHeight/2; // 엘리먼트의 중심점y
pointer.style.left = x - pw + "px";
pointer.style.top = y - ph + "px";
console.log(x, y);
}
setInterval(function() {
display('pointer', 150, 150, 150, 150);
distance += 5;
}, 100);
</script>
</body>
</html>