☰

Useless Things Series: Circle 2

Display concentric circles with alternating black and white colors on the webpage

当前为 2024-02-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Useless Things Series: Circle 2
  3. // @namespace    Useless Things Series: ??
  4. // @version      1.0
  5. // @description  Display concentric circles with alternating black and white colors on the webpage
  6. // @match        *://*/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace https://greasyfork.org/users/1126616
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Circle settings
  16.     const numCircles = 150; // Number of circles
  17.     const circleSpacing = 5; // Spacing between circles
  18.     let circleRadius = 400; // Initial radius of the largest circle
  19.     const centerX = window.innerWidth / 2; // X-coordinate of the center
  20.     const centerY = window.innerHeight / 2; // Y-coordinate of the center
  21.  
  22.     // Create circle overlay
  23.     const circleOverlay = document.createElement('div');
  24.     circleOverlay.style.position = 'fixed';
  25.     circleOverlay.style.top = '0';
  26.     circleOverlay.style.left = '0';
  27.     circleOverlay.style.width = '100%';
  28.     circleOverlay.style.height = '100%';
  29.     circleOverlay.style.pointerEvents = 'none';
  30.     circleOverlay.style.zIndex = '9999';
  31.     circleOverlay.style.display = 'none'; // Initially hidden
  32.  
  33.     // Add circles with alternating black and white colors
  34.     for (let i = 0; i < numCircles; i++) {
  35.         const circle = document.createElement('div');
  36.         circle.style.position = 'absolute';
  37.         circle.style.width = `${circleRadius * 2}px`;
  38.         circle.style.height = `${circleRadius * 2}px`;
  39.         circle.style.borderRadius = '50%';
  40.         circle.style.backgroundColor = i % 2 === 0 ? 'white' : 'black'; // Alternating black and white colors
  41.         circle.style.border = '1px solid #000'; // Circle border color
  42.         circle.style.left = `${centerX - circleRadius}px`;
  43.         circle.style.top = `${centerY - circleRadius}px`;
  44.         circleRadius -= circleSpacing; // Decrease circle radius for the next circle
  45.         circleOverlay.appendChild(circle);
  46.     }
  47.  
  48.     // Append circle overlay to the body
  49.     document.body.appendChild(circleOverlay);
  50.  
  51.     // Toggle circle overlay visibility when 'p' key is pressed
  52.     document.addEventListener('keydown', function(event) {
  53.         if (event.key.toLowerCase() === 'p') {
  54.             circleOverlay.style.display = circleOverlay.style.display === 'none' ? 'block' : 'none';
  55.         }
  56.     });
  57.  
  58. })();