Circles Around a Large Circle

HTML

CSS

JavaScript

const circles = [{
        color: 'red',
        text: '1'
    },
    {
        color: 'blue',
        text: '2'
    },
    {
        color: 'green',
        text: '3'
    },
    {
        color: 'purple',
        text: '4'
    },
    {
        color: 'orange',
        text: '5'
    },
    {
        color: 'pink',
        text: '6'
    },
    {
        color: 'cyan',
        text: '7'
    },
    {
        color: 'brown',
        text: '8'
    },
    {
        color: 'lime',
        text: '9'
    },
    {
        color: 'violet',
        text: '10'
    }
];

const circleSizeReduction = 10;

function createCircles(circles) {
    const container = document.getElementById('circleContainer');
    const containerRadius = container.offsetWidth / 2;

const n = circles.length;
    const angleStep = (2 * Math.PI) / n;

const innerCircleRadius = (containerRadius * Math.sin(Math.PI / n)) / (1 + Math.sin(Math.PI / n));

circles.forEach((circle, index) => {
        let adjustedDiameter = 2 * innerCircleRadius - circleSizeReduction;

if (adjustedDiameter < 0) {
            adjustedDiameter = 0;
        }

const angle = index * angleStep;
        const adjustedRadius = adjustedDiameter / 2;
        const x = containerRadius + (containerRadius - adjustedRadius) * Math.cos(angle) - adjustedRadius;
        const y = containerRadius + (containerRadius - adjustedRadius) * Math.sin(angle) - adjustedRadius;

const span = document.createElement('span');
        span.textContent = circle.text;
        circleDiv.appendChild(span);

container.appendChild(circleDiv);
    });
}

createCircles(circles);

Preview: Circles Around a Large Circle

By me a coffee

<body>

@polyxgo

PolyXGO

Mã JavaScript tạo các vòng tròn nhỏ bên trong một vòng tròn lớn và sắp xếp chúng theo bố cục tròn. Mảng circles xác định màu sắc và nhãn của mỗi vòng tròn nhỏ (số từ 1 đến 10). Hàm createCircles xử lý việc hiển thị.

Đầu tiên, tính bán kính của container và xác định góc giữa mỗi vòng tròn để đảm bảo khoảng cách đều nhau. Kích thước của mỗi vòng tròn được tính dựa trên kích thước của container và giảm đi một giá trị cố định (circleSizeReduction).

Sử dụng các hàm lượng giác, mã tính toán tọa độ x và y cho mỗi vòng tròn để đặt chúng xung quanh tâm. Một phần tử div được tạo cho mỗi vòng tròn, được định kiểu với màu nền, kích thước và nhãn, và được đặt vị trí bằng cách sử dụng định vị tuyệt đối. Kết quả là một bố cục cân đối trực quan với các vòng tròn nhỏ xoay quanh một điểm trung tâm.

Ứng dụng thực tế cho việc phát triển

Plugin tính năng menu xoay tròn. Tính năng menu trong plugin PolyBlocks.
Plugin phong thủy, chiêm cần thể hiện hiệu ứng động cho các chòm sao, ngũ hành, 12 con giáp, cung hoàng đạo,…

HTML

CSS

JavaScript

Preview: Circles Around a Large Circle

Ứng dụng thực tế cho việc phát triển

Đăng nhập

Đăng ký