Modern Time Display (Rounded)

Displays the current time in milliseconds

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name         Modern Time Display (Rounded)
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Displays the current time in milliseconds
// @author       NEMES
// @match        *://*/*
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create the time display window
    const timeWindow = document.createElement('div');
    timeWindow.style.position = 'fixed';
    timeWindow.style.right = '0';
    timeWindow.style.top = '50%';
    timeWindow.style.transform = 'translateY(-50%)';
    timeWindow.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    timeWindow.style.color = '#ffffff';
    timeWindow.style.padding = '10px';
    timeWindow.style.fontFamily = 'Arial, sans-serif';
    timeWindow.style.fontSize = '24px';
    timeWindow.style.zIndex = '9999';
    timeWindow.style.pointerEvents = 'auto';
    timeWindow.style.userSelect = 'none';
    timeWindow.style.cursor = 'move';
    timeWindow.style.display = 'none'; // Set display to 'none' initially
    timeWindow.style.borderRadius = '10px'; // Add rounded corners
    document.body.appendChild(timeWindow);

    // Create the return button
    const returnButton = document.createElement('button');
    returnButton.style.position = 'fixed';
    returnButton.style.right = '10px';
    returnButton.style.bottom = '10px';
    returnButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    returnButton.style.color = '#ffffff';
    returnButton.style.padding = '5px';
    returnButton.style.border = 'none';
    returnButton.style.zIndex = '9999';
    returnButton.innerText = 'Show';
    returnButton.style.borderRadius = '10px'; // Add rounded corners
    returnButton.addEventListener('click', () => {
        timeWindow.style.display = 'block';
        hideButton.style.display = 'block';
        returnButton.style.display = 'none';
    });
    document.body.appendChild(returnButton);

    // Create the hide button
    const hideButton = document.createElement('button');
    hideButton.style.position = 'fixed';
    hideButton.style.right = '10px';
    hideButton.style.bottom = '10px';
    hideButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    hideButton.style.color = '#ffffff';
    hideButton.style.padding = '5px';
    hideButton.style.border = 'none';
    hideButton.style.zIndex = '9999';
    hideButton.style.display = 'none'; // Set display to 'none' initially
    hideButton.innerText = 'Hide';
    hideButton.style.borderRadius = '10px'; // Add rounded corners
    hideButton.addEventListener('click', () => {
        timeWindow.style.display = 'none';
        hideButton.style.display = 'none';
        returnButton.style.display = 'block';
    });
    document.body.appendChild(hideButton);

    // Function to handle window movement
    let isDragging = false;
    let offset = { x: 0, y: 0 };

    function handleMouseDown(event) {
        isDragging = true;
        offset.x = event.clientX - timeWindow.offsetLeft;
        offset.y = event.clientY - timeWindow.offsetTop;
    }

    function handleMouseMove(event) {
        if (isDragging) {
            const x = event.clientX - offset.x;
            const y = event.clientY - offset.y;
            timeWindow.style.right = 'auto';
            timeWindow.style.left = `${x}px`;
            timeWindow.style.top = `${y}px`;
        }
    }

    function handleMouseUp() {
        isDragging = false;
    }

    // Attach event listeners for window movement
    timeWindow.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    // Function to update the time display
    function updateTimeDisplay() {
        const currentTime = new Date();
        const hours = currentTime.getHours().toString().padStart(2, '0');
        const minutes = currentTime.getMinutes().toString().padStart(2, '0');
        const seconds = currentTime.getSeconds().toString().padStart(2, '0');
        const milliseconds = currentTime.getMilliseconds().toString().padStart(3, '0');
        timeWindow.innerText = `${hours}:${minutes}:${seconds}.${milliseconds}`;
    }

    // Update the time display every millisecond
    setInterval(updateTimeDisplay, 1);

    // Show the return button by default
    returnButton.style.display = 'block';
})();