☰

Fancy Clock

Displays a fancy AM/PM clock that can be moved around the screen and overlays everything.

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

  1. // ==UserScript==
  2. // @name         Fancy Clock
  3. // @version      5.4
  4. // @description  Displays a fancy AM/PM clock that can be moved around the screen and overlays everything.
  5. // @author       Rylogix
  6. // @match        *://*/*
  7. // @grant        none
  8. // @namespace https://greasyfork.org/users/1260014
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create a clock container
  15.     var clockContainer = document.createElement('div');
  16.     clockContainer.id = 'fancy-clock';
  17.     clockContainer.style.position = 'fixed';
  18.     clockContainer.style.top = '10px';
  19.     clockContainer.style.left = '10px'; // Updated left position
  20.     clockContainer.style.color = '#ffffff';
  21.     clockContainer.style.fontFamily = 'Arial, sans-serif';
  22.     clockContainer.style.fontSize = '20px';
  23.     clockContainer.style.padding = '10px';
  24.     clockContainer.style.background = 'rgba(0, 0, 0, 0.5)';
  25.     clockContainer.style.borderRadius = '5px';
  26.     clockContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  27.     clockContainer.style.zIndex = '9999'; // Set a high z-index to overlay everything
  28.     document.body.appendChild(clockContainer);
  29.  
  30.     var isDragging = false;
  31.     var offsetX, offsetY;
  32.  
  33.     // Function to update the clock
  34.     function updateClock() {
  35.         var currentTime = new Date();
  36.         var hours = currentTime.getHours();
  37.         var minutes = currentTime.getMinutes();
  38.         var seconds = currentTime.getSeconds();
  39.         var meridiem = hours >= 12 ? 'PM' : 'AM';
  40.  
  41.         // Convert 24-hour time to 12-hour time
  42.         hours = hours % 12;
  43.         hours = hours ? hours : 12; // the hour '0' should be '12'
  44.  
  45.         // Add leading zeros to minutes and seconds
  46.         minutes = minutes < 10 ? '0' + minutes : minutes;
  47.         seconds = seconds < 10 ? '0' + seconds : seconds;
  48.  
  49.         // Update clock text
  50.         clockContainer.textContent = hours + ':' + minutes + ':' + seconds + ' ' + meridiem;
  51.     }
  52.  
  53.     // Update clock every second
  54.     setInterval(updateClock, 1000);
  55.  
  56.     // Function to handle mouse down event
  57.     function onMouseDown(e) {
  58.         isDragging = true;
  59.         offsetX = e.clientX - clockContainer.getBoundingClientRect().left;
  60.         offsetY = e.clientY - clockContainer.getBoundingClientRect().top;
  61.     }
  62.  
  63.     // Function to handle mouse move event
  64.     function onMouseMove(e) {
  65.         if (isDragging) {
  66.             var x = e.clientX - offsetX;
  67.             var y = e.clientY - offsetY;
  68.             clockContainer.style.left = x + 'px';
  69.             clockContainer.style.top = y + 'px';
  70.         }
  71.     }
  72.  
  73.     // Function to handle mouse up event
  74.     function onMouseUp() {
  75.         isDragging = false;
  76.     }
  77.  
  78.     // Add event listeners
  79.     clockContainer.addEventListener('mousedown', onMouseDown);
  80.     document.addEventListener('mousemove', onMouseMove);
  81.     document.addEventListener('mouseup', onMouseUp);
  82.  
  83. })();