如何在Tampermonkey中实现页面刷新时时间数组同步更新与时间自动刷新功能

嘿，针对你提出的两个时间处理需求，我整理了具体的实现方案，咱们一步步来：

1. 页面刷新时更新时分秒数组 #

页面刷新时浏览器会重新渲染DOM，咱们只需要在页面完全加载完成后，重新抓取最新的时间文本并分割成数组即可。这里可以封装一个复用函数，避免重复写冗余代码：

实现代码 #

// 封装获取时间数组的工具函数，传入元素选择器就能返回[小时, 分钟, 秒]数组
function getTimeArray(selector) {
    const timeText = document.querySelector(selector).innerText;
    return timeText.split(':');
}

// 页面DOM渲染完成后执行（刷新页面时会自动触发）
window.addEventListener('DOMContentLoaded', function() {
    // 更新serverTime1数组
    const serverTime1 = getTimeArray('#commands_outgoings > table > tbody > tr:nth-child(2) > td:nth-child(3) > span');
    // 更新serverTime数组
    const serverTime = getTimeArray('#serverTime');
    
    console.log('刷新后的serverTime1:', serverTime1);
    console.log('刷新后的serverTime:', serverTime);
});

小提示 #

• 用DOMContentLoaded事件能确保我们操作DOM时，所有元素都已经渲染完成，不会出现找不到节点的报错；
• 如果你的页面用了jQuery，也可以把querySelector换成$(selector).text()，效果完全一致。

2. Tampermonkey（油猴脚本）中实现自动刷新 #

油猴脚本的核心是定时执行时间获取逻辑，同时还要考虑页面动态加载内容的情况（比如时间是后端异步返回的）。下面是完整的可直接用的脚本示例：

完整Tampermonkey脚本 #

// ==UserScript==
// @name         自动刷新时间数组脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  定时更新并打印页面的时间数组
// @author       You
// @match        https://你的目标网站域名/*  // 这里一定要替换成你要运行脚本的网站URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 复用的时间数组获取函数，增加了容错处理
    function getTimeArray(selector) {
        const element = document.querySelector(selector);
        // 如果元素还没加载出来，返回默认值避免报错
        if (!element) return ['00', '00', '00'];
        return element.innerText.split(':');
    }

    // 定义更新数组的核心逻辑
    function updateTimeArrays() {
        const serverTime1 = getTimeArray('#commands_outgoings > table > tbody > tr:nth-child(2) > td:nth-child(3) > span');
        const serverTime = getTimeArray('#serverTime');
        
        console.log('当前serverTime1:', serverTime1);
        console.log('当前serverTime:', serverTime);
    }

    // 脚本加载后先执行一次初始获取
    window.addEventListener('DOMContentLoaded', updateTimeArrays);

    // 定时自动刷新，这里设置1秒刷新一次，你可以根据需求调整毫秒数
    setInterval(updateTimeArrays, 1000);

    // 可选优化：如果页面时间是动态更新的（比如AJAX实时推送），用MutationObserver监听元素变化
    const serverTimeElement = document.querySelector('#serverTime');
    if (serverTimeElement) {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                // 只要元素文本变化，就立刻更新数组
                if (mutation.type === 'characterData' || mutation.type === 'childList') {
                    updateTimeArrays();
                }
            });
        });
        observer.observe(serverTimeElement, { childList: true, subtree: true, characterData: true });
    }
})();

关键注意点 #

• @match：必须替换成你要运行脚本的目标网站URL，否则脚本不会生效；
• 定时间隔：setInterval的第二个参数是毫秒数，示例是1秒刷新一次，你可以根据实际需求调整；
• 动态内容兼容：如果页面的时间是后端实时推送更新的，用MutationObserver可以监听元素文本变化，比定时刷新更实时；
• 容错处理：获取元素时增加了判断，避免页面加载慢时元素还没出现导致脚本报错。

内容的提问来源于stack exchange，提问作者John Deatd