☰

Display Time

Displays the current time in the any place of the page.

  1. // ==UserScript==
  2. // @name         Display Time
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Displays the current time in the any place of the page.
  6. // @author       You
  7. // @match       *://*/*
  8. // @grant        GM_getValue
  9. // @grant        GM_setValue
  10. // @grant        GM_registerMenuCommand
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     const defaultSettings = {
  16.         top: '10px',
  17.         left: '10px',
  18.         backgroundColor: 'rgba(0, 0, 0, 0.5)',
  19.         textColor: 'white',
  20.         fontSize: '14px',
  21.         draggable: false // Initial draggable state
  22.     };
  23.     const settings = Object.assign({}, defaultSettings, GM_getValue('timeDisplaySettings'));
  24.     function saveSettings() {
  25.         GM_setValue('timeDisplaySettings', settings);
  26.     }
  27.     const timeDiv = document.createElement('div');
  28.     timeDiv.id = 'myTimeDisplay';
  29.     styleTimeDiv();
  30.     function styleTimeDiv() {
  31.         timeDiv.style.position = 'fixed';
  32.         timeDiv.style.top = settings.top;
  33.         timeDiv.style.left = settings.left;
  34.         timeDiv.style.padding = '5px 10px';
  35.         timeDiv.style.backgroundColor = settings.backgroundColor;
  36.         timeDiv.style.color = settings.textColor;
  37.         timeDiv.style.borderRadius = '5px';
  38.         timeDiv.style.zIndex = '9999';
  39.         timeDiv.style.fontSize = settings.fontSize;
  40.         timeDiv.style.cursor = settings.draggable ? 'move' : 'default';
  41.     }
  42.     function updateTime() {
  43.         const now = new Date();
  44.         timeDiv.textContent = now.toLocaleTimeString();
  45.     }
  46.     let isDragging = false;
  47.     let offsetX, offsetY;
  48.     timeDiv.addEventListener('mousedown', (e) => {
  49.         if (settings.draggable) {
  50.             isDragging = true;
  51.             offsetX = e.clientX - timeDiv.offsetLeft;
  52.             offsetY = e.clientY - timeDiv.offsetTop;
  53.         }
  54.     });
  55.     document.addEventListener('mousemove', (e) => {
  56.         if (isDragging) {
  57.             settings.left = (e.clientX - offsetX) + 'px';
  58.             settings.top = (e.clientY - offsetY) + 'px';
  59.             timeDiv.style.left = settings.left;
  60.             timeDiv.style.top = settings.top;
  61.         }
  62.     });
  63.     document.addEventListener('mouseup', () => {
  64.         if (isDragging) {
  65.             isDragging = false;
  66.             saveSettings();
  67.         }
  68.     });
  69.     document.body.appendChild(timeDiv);
  70.     updateTime();
  71.     setInterval(updateTime, 1000);
  72.     GM_registerMenuCommand("Toggle Draggable", () => {
  73.         settings.draggable = !settings.draggable;
  74.         styleTimeDiv(); // Reapply styles
  75.         saveSettings();
  76.     });
  77. })();