☰

Greasy Fork is available in English.

Clock Display

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

// ==UserScript==
// @name         Clock Display
// @version      5.5
// @description  Displays a fancy AM/PM clock that can be moved around the screen and overlays everything.
// @author       Rylogix
// @match        *://*/*
// @grant        none
// @namespace https://greasyfork.org/users/1260014
// ==/UserScript==

(function() {
    'use strict';

    // Create a clock container
    var clockContainer = document.createElement('div');
    clockContainer.id = 'fancy-clock';
    clockContainer.style.position = 'fixed';
    clockContainer.style.top = '10px';
    clockContainer.style.left = '10px'; // Updated left position
    clockContainer.style.color = '#ffffff';
    clockContainer.style.fontFamily = 'Arial, sans-serif';
    clockContainer.style.fontSize = '20px';
    clockContainer.style.padding = '10px';
    clockContainer.style.background = 'rgba(0, 0, 0, 0.5)';
    clockContainer.style.borderRadius = '5px';
    clockContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
    clockContainer.style.zIndex = '9999'; // Set a high z-index to overlay everything
    document.body.appendChild(clockContainer);

    var isDragging = false;
    var offsetX, offsetY;

    // Function to update the clock
    function updateClock() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var meridiem = hours >= 12 ? 'PM' : 'AM';

        // Convert 24-hour time to 12-hour time
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'

        // Add leading zeros to minutes and seconds
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        // Update clock text
        clockContainer.textContent = hours + ':' + minutes + ':' + seconds + ' ' + meridiem;
    }

    // Update clock every second
    setInterval(updateClock, 1000);

    // Function to handle mouse down event
    function onMouseDown(e) {
        isDragging = true;
        offsetX = e.clientX - clockContainer.getBoundingClientRect().left;
        offsetY = e.clientY - clockContainer.getBoundingClientRect().top;
    }

    // Function to handle mouse move event
    function onMouseMove(e) {
        if (isDragging) {
            var x = e.clientX - offsetX;
            var y = e.clientY - offsetY;
            clockContainer.style.left = x + 'px';
            clockContainer.style.top = y + 'px';
        }
    }

    // Function to handle mouse up event
    function onMouseUp() {
        isDragging = false;
    }

    // Add event listeners
    clockContainer.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

})();