47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
const astroCircle = document.getElementById("astroCircle");
|
|
|
|
const labels = [
|
|
"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
|
|
];
|
|
|
|
const circleSize = astroCircle.offsetWidth;
|
|
const centerX = circleSize / 2;
|
|
const centerY = circleSize / 2;
|
|
|
|
const radius = circleSize / 2;
|
|
|
|
// numbers will be placed OUTSIDE the circle
|
|
const numberRadius = radius + 25;
|
|
|
|
for (let i = 0; i < 12; i++) {
|
|
|
|
const angleDeg = i * 30;
|
|
const angleRad = (angleDeg - 90) * Math.PI / 180;
|
|
|
|
// draw segment divider
|
|
const line = document.createElement("div");
|
|
line.classList.add("segment-line");
|
|
line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
|
|
astroCircle.appendChild(line);
|
|
|
|
// place number in center of segment
|
|
const midAngle = angleDeg + 15;
|
|
const midRad = (midAngle - 90) * Math.PI / 180;
|
|
|
|
const x = centerX + numberRadius * Math.cos(midRad);
|
|
const y = centerY + numberRadius * Math.sin(midRad);
|
|
|
|
const number = document.createElement("div");
|
|
number.classList.add("segment-number");
|
|
number.innerText = labels[i];
|
|
|
|
number.style.left = `${x}px`;
|
|
number.style.top = `${y}px`;
|
|
|
|
astroCircle.appendChild(number);
|
|
|
|
}
|
|
|
|
}); |