Persistent Floating Stopwatch

It adds a persistent stopwatch to any page that continues even if you reload the page

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

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

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Persistent Floating Stopwatch
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  It adds a persistent stopwatch to any page that continues even if you reload the page
// @author       b4kt
// @match        *://*/*
// @grant        none
// @license      GNU GPLv3
// ==/UserScript==

(function() {
    'use strict';

    // Add the HTML and CSS to the page
    const stopwatchHTML = `
    <div id="stopwatch" style="
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 5px;
        font-family: monospace;
        font-size: 14px;
        text-align: center;
    ">
        <div id="stopwatch-time">00:00:00</div>
        <button id="stopwatch-start">Start</button>
        <button id="stopwatch-stop" style="display:none;">Stop</button>
        <button id="stopwatch-reset">Reset</button>
    </div>
    `;

    document.body.insertAdjacentHTML('beforeend', stopwatchHTML);

    // Stopwatch functionality
    let startTime;
    let elapsedTime = localStorage.getItem('elapsedTime') ? parseInt(localStorage.getItem('elapsedTime')) : 0;
    let timerInterval;

    function updateTime() {
        elapsedTime = Date.now() - startTime;
        localStorage.setItem('elapsedTime', elapsedTime);
        const timeString = new Date(elapsedTime).toISOString().substr(11, 8);
        document.getElementById('stopwatch-time').textContent = timeString;
    }

    function startStopwatch() {
        startTime = Date.now() - elapsedTime;
        timerInterval = setInterval(updateTime, 100);
        document.getElementById('stopwatch-start').style.display = 'none';
        document.getElementById('stopwatch-stop').style.display = '';
        localStorage.setItem('stopwatchRunning', 'true');
    }

    function stopStopwatch() {
        clearInterval(timerInterval);
        document.getElementById('stopwatch-start').style.display = '';
        document.getElementById('stopwatch-stop').style.display = 'none';
        localStorage.setItem('stopwatchRunning', 'false');
    }

    function resetStopwatch() {
        clearInterval(timerInterval);
        elapsedTime = 0;
        localStorage.setItem('elapsedTime', elapsedTime);
        document.getElementById('stopwatch-time').textContent = '00:00:00';
        document.getElementById('stopwatch-start').style.display = '';
        document.getElementById('stopwatch-stop').style.display = 'none';
        localStorage.setItem('stopwatchRunning', 'false');
    }

    document.getElementById('stopwatch-start').addEventListener('click', startStopwatch);
    document.getElementById('stopwatch-stop').addEventListener('click', stopStopwatch);
    document.getElementById('stopwatch-reset').addEventListener('click', resetStopwatch);

    // Set the initial state of the stopwatch based on stored data
    if (elapsedTime > 0) {
        const timeString = new Date(elapsedTime).toISOString().substr(11, 8);
        document.getElementById('stopwatch-time').textContent = timeString;
    }

    if (localStorage.getItem('stopwatchRunning') === 'true') {
        startStopwatch();
    } else {
        stopStopwatch();
    }
})();