☰

网页自动刷新（支持秒、分钟、小时 + 倒计时进度条）

小巧简洁的网页自动刷新工具，支持秒、分钟、小时选择和倒计时进度条显示，窗口可拖动

  1. // ==UserScript==
  2. // @name         网页自动刷新（支持秒、分钟、小时 + 倒计时进度条）
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  小巧简洁的网页自动刷新工具，支持秒、分钟、小时选择和倒计时进度条显示，窗口可拖动
  6. // @author       鹏
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function () {
  12.     'use strict';
  13.  
  14.     // 创建容器
  15.     const container = document.createElement('div');
  16.     container.style.position = 'fixed';
  17.     container.style.top = '10px';
  18.     container.style.right = '10px';
  19.     container.style.width = '180px';
  20.     container.style.height = '100px';
  21.     container.style.backgroundColor = '#ffffff';
  22.     container.style.border = '2px solid #4CAF50';
  23.     container.style.borderRadius = '25px';
  24.     container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
  25.     container.style.zIndex = '9999';
  26.     container.style.display = 'flex';
  27.     container.style.flexDirection = 'column';
  28.     container.style.alignItems = 'center';
  29.     container.style.justifyContent = 'space-around';
  30.     container.style.cursor = 'move';
  31.     container.style.userSelect = 'none';
  32.     container.style.padding = '5px';
  33.  
  34.     // 创建输入框
  35.     const input = document.createElement('input');
  36.     input.type = 'number';
  37.     input.placeholder = '时间';
  38.     input.style.width = '50px';
  39.     input.style.height = '25px';
  40.     input.style.textAlign = 'center';
  41.     input.style.border = '1px solid #ccc';
  42.     input.style.borderRadius = '5px';
  43.     input.style.outline = 'none';
  44.  
  45.     // 创建单位选择框
  46.     const unitSelect = document.createElement('select');
  47.     unitSelect.style.width = '60px';
  48.     unitSelect.style.height = '25px';
  49.     unitSelect.style.border = '1px solid #ccc';
  50.     unitSelect.style.borderRadius = '5px';
  51.     unitSelect.style.outline = 'none';
  52.     ['秒', '分钟', '小时'].forEach((unit) => {
  53.         const option = document.createElement('option');
  54.         option.value = unit;
  55.         option.textContent = unit;
  56.         unitSelect.appendChild(option);
  57.     });
  58.  
  59.     // 创建复选框
  60.     const checkbox = document.createElement('input');
  61.     checkbox.type = 'checkbox';
  62.     checkbox.style.width = '20px';
  63.     checkbox.style.height = '20px';
  64.  
  65.     // 创建进度条容器
  66.     const progressBarContainer = document.createElement('div');
  67.     progressBarContainer.style.width = '100%';
  68.     progressBarContainer.style.height = '10px';
  69.     progressBarContainer.style.backgroundColor = '#f3f3f3';
  70.     progressBarContainer.style.borderRadius = '5px';
  71.     progressBarContainer.style.marginTop = '5px';
  72.  
  73.     const progressBar = document.createElement('div');
  74.     progressBar.style.height = '100%';
  75.     progressBar.style.width = '100%'; // 初始化为满条
  76.     progressBar.style.backgroundColor = '#4CAF50';
  77.     progressBar.style.borderRadius = '5px';
  78.     progressBarContainer.appendChild(progressBar);
  79.  
  80.     // 将元素添加到容器
  81.     container.appendChild(input);
  82.     container.appendChild(unitSelect);
  83.     container.appendChild(checkbox);
  84.     container.appendChild(progressBarContainer);
  85.  
  86.     // 添加到页面
  87.     document.body.appendChild(container);
  88.  
  89.     // 保存刷新设置
  90.     const savedTime = localStorage.getItem('refreshTime');
  91.     const savedUnit = localStorage.getItem('refreshUnit');
  92.     const savedChecked = localStorage.getItem('checkboxChecked') === 'true';
  93.  
  94.     if (savedTime) input.value = savedTime;
  95.     if (savedUnit) unitSelect.value = savedUnit;
  96.     checkbox.checked = savedChecked;
  97.  
  98.     // 刷新逻辑
  99.     let refreshInterval;
  100.     let progressInterval;
  101.  
  102.     const convertToMilliseconds = (time, unit) => {
  103.         switch (unit) {
  104.             case '秒': return time * 1000;
  105.             case '分钟': return time * 1000 * 60;
  106.             case '小时': return time * 1000 * 60 * 60;
  107.             default: return time * 1000;
  108.         }
  109.     };
  110.  
  111.     const startRefresh = () => {
  112.         const timeInSeconds = parseInt(input.value, 10);
  113.         const unit = unitSelect.value;
  114.         if (!isNaN(timeInSeconds) && timeInSeconds > 0) {
  115.             const interval = convertToMilliseconds(timeInSeconds, unit);
  116.             refreshInterval = setInterval(() => {
  117.                 location.reload();
  118.             }, interval);
  119.  
  120.             // 倒计时进度条动画
  121.             let remainingTime = interval;
  122.             progressBar.style.width = '100%'; // 初始化为满条
  123.             progressInterval = setInterval(() => {
  124.                 remainingTime -= 100; // 每次减少 100ms
  125.                 const progress = (remainingTime / interval) * 100;
  126.                 progressBar.style.width = `${progress}%`;
  127.                 if (remainingTime <= 0) {
  128.                     clearInterval(progressInterval); // 重置进度条动画
  129.                 }
  130.             }, 100);
  131.         } else {
  132.             alert('请输入有效的刷新时间！');
  133.             checkbox.checked = false;
  134.         }
  135.     };
  136.  
  137.     const stopRefresh = () => {
  138.         clearInterval(refreshInterval);
  139.         clearInterval(progressInterval);
  140.         progressBar.style.width = '100%'; // 重置为满条
  141.     };
  142.  
  143.     // 保存设置
  144.     const saveSettings = () => {
  145.         localStorage.setItem('refreshTime', input.value);
  146.         localStorage.setItem('refreshUnit', unitSelect.value);
  147.         localStorage.setItem('checkboxChecked', checkbox.checked);
  148.     };
  149.  
  150.     // 复选框监听
  151.     checkbox.addEventListener('change', () => {
  152.         saveSettings();
  153.         checkbox.checked ? startRefresh() : stopRefresh();
  154.     });
  155.  
  156.     // 输入框和单位选择框监听
  157.     input.addEventListener('input', saveSettings);
  158.     unitSelect.addEventListener('change', saveSettings);
  159.  
  160.     // 启动时恢复设置
  161.     if (checkbox.checked) startRefresh();
  162.  
  163.     // 拖动功能
  164.     let isDragging = false;
  165.     let offsetX, offsetY;
  166.  
  167.     container.addEventListener('mousedown', (e) => {
  168.         isDragging = true;
  169.         offsetX = e.clientX - container.getBoundingClientRect().left;
  170.         offsetY = e.clientY - container.getBoundingClientRect().top;
  171.         container.style.cursor = 'grabbing';
  172.     });
  173.  
  174.     document.addEventListener('mousemove', (e) => {
  175.         if (isDragging) {
  176.             container.style.left = `${e.clientX - offsetX}px`;
  177.             container.style.top = `${e.clientY - offsetY}px`;
  178.         }
  179.     });
  180.  
  181.     document.addEventListener('mouseup', () => {
  182.         isDragging = false;
  183.         container.style.cursor = 'move';
  184.     });
  185. })();