Useless Things Series: Circle 2

Display concentric circles with alternating black and white colors on the webpage
当前为 2024-02-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Useless Things Series: Circle 2
// @namespace    Useless Things Series: ??
// @version      1.0
// @description  Display concentric circles with alternating black and white colors on the webpage
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==

(function() {
    'use strict';

    // Circle settings
    const numCircles = 150; // Number of circles
    const circleSpacing = 5; // Spacing between circles
    let circleRadius = 400; // Initial radius of the largest circle
    const centerX = window.innerWidth / 2; // X-coordinate of the center
    const centerY = window.innerHeight / 2; // Y-coordinate of the center

    // Create circle overlay
    const circleOverlay = document.createElement('div');
    circleOverlay.style.position = 'fixed';
    circleOverlay.style.top = '0';
    circleOverlay.style.left = '0';
    circleOverlay.style.width = '100%';
    circleOverlay.style.height = '100%';
    circleOverlay.style.pointerEvents = 'none';
    circleOverlay.style.zIndex = '9999';
    circleOverlay.style.display = 'none'; // Initially hidden

    // Add circles with alternating black and white colors
    for (let i = 0; i < numCircles; i++) {
        const circle = document.createElement('div');
        circle.style.position = 'absolute';
        circle.style.width = `${circleRadius * 2}px`;
        circle.style.height = `${circleRadius * 2}px`;
        circle.style.borderRadius = '50%';
        circle.style.backgroundColor = i % 2 === 0 ? 'white' : 'black'; // Alternating black and white colors
        circle.style.border = '1px solid #000'; // Circle border color
        circle.style.left = `${centerX - circleRadius}px`;
        circle.style.top = `${centerY - circleRadius}px`;
        circleRadius -= circleSpacing; // Decrease circle radius for the next circle
        circleOverlay.appendChild(circle);
    }

    // Append circle overlay to the body
    document.body.appendChild(circleOverlay);

    // Toggle circle overlay visibility when 'p' key is pressed
    document.addEventListener('keydown', function(event) {
        if (event.key.toLowerCase() === 'p') {
            circleOverlay.style.display = circleOverlay.style.display === 'none' ? 'block' : 'none';
        }
    });

})();