☰

Website Usage Timer

Shows a timer on any website to track time spent, with hide/show toggle

当前为 2025-03-20 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Website Usage Timer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  Shows a timer on any website to track time spent, with hide/show toggle
  6. // @author       Drewby123
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     // Prevent script from running inside iframes
  16.     if (window.top !== window.self) return;
  17.  
  18.     // Create the container
  19.     const container = document.createElement('div');
  20.     container.style.position = 'fixed';
  21.     container.style.bottom = '20px';
  22.     container.style.right = '20px';
  23.     container.style.zIndex = '9999';
  24.     container.style.display = 'flex';
  25.     container.style.flexDirection = 'column';
  26.     container.style.alignItems = 'flex-end';
  27.     container.style.gap = '6px';
  28.  
  29.     // Create the timer box
  30.     const timerBox = document.createElement('div');
  31.     timerBox.id = 'site-timer-overlay';
  32.     timerBox.style.background = 'rgba(0, 0, 0, 0.7)';
  33.     timerBox.style.color = '#fff';
  34.     timerBox.style.padding = '10px 14px';
  35.     timerBox.style.borderRadius = '10px';
  36.     timerBox.style.fontFamily = 'monospace';
  37.     timerBox.style.fontSize = '14px';
  38.     timerBox.style.boxShadow = '0 2px 8px rgba(0,0,0,0.5)';
  39.     timerBox.textContent = 'Time on site: 00:00';
  40.  
  41.     // Create the toggle button
  42.     const toggleBtn = document.createElement('button');
  43.     toggleBtn.textContent = '⨉';
  44.     toggleBtn.style.background = '#000';
  45.     toggleBtn.style.border = '1px solid #fff';
  46.     toggleBtn.style.color = '#fff';
  47.     toggleBtn.style.cursor = 'pointer';
  48.     toggleBtn.style.fontSize = '14px';
  49.     toggleBtn.style.fontFamily = 'monospace';
  50.     toggleBtn.style.padding = '4px 8px';
  51.     toggleBtn.style.borderRadius = '6px';
  52.     toggleBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
  53.     toggleBtn.style.transition = 'background 0.2s';
  54.     toggleBtn.onmouseenter = () => toggleBtn.style.background = '#222';
  55.     toggleBtn.onmouseleave = () => toggleBtn.style.background = '#000';
  56.  
  57.     let visible = true;
  58.     toggleBtn.onclick = () => {
  59.         visible = !visible;
  60.         timerBox.style.display = visible ? 'block' : 'none';
  61.         toggleBtn.textContent = visible ? '⨉' : '⧉';
  62.     };
  63.  
  64.     container.appendChild(toggleBtn);
  65.     container.appendChild(timerBox);
  66.     document.body.appendChild(container);
  67.  
  68.     // Timer logic
  69.     let seconds = 0;
  70.     setInterval(() => {
  71.         if (visible) {
  72.             seconds++;
  73.             const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
  74.             const secs = (seconds % 60).toString().padStart(2, '0');
  75.             timerBox.textContent = `Time on site: ${mins}:${secs}`;
  76.         }
  77.     }, 1000);
  78. })();