页面访问计时器

记录并显示用户在每个页面的停留时间
目前为 2024-06-27 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         页面访问计时器
// @version      0.4
// @description  记录并显示用户在每个页面的停留时间
// @author       lbihhe
// @match        *://*/*
// @run-at       document-start
// @grant        none
// @license      MIT
// @namespace https://gf.qytechs.cn/users/1317293
// ==/UserScript==

(function() {
    'use strict';

    // 定义开始时间和累计时间
    let startTime;
    let accumulatedTime = 0;
    let timerInterval; // 定义计时器的interval变量
    const currentUrl = window.location.href; // 获取当前页面URL

    // 从localStorage获取时间数据
    const getTimeData = () => {
        const storedData = localStorage.getItem('timeData');
        return storedData ? JSON.parse(storedData) : {};
    };

    // 更新页面停留时间并保存到localStorage
    const updatePageTime = (url, timeSpent) => {
        const timeData = getTimeData();
        timeData[url] = (timeData[url] || 0) + timeSpent;
        localStorage.setItem('timeData', JSON.stringify(timeData));
    };

    // 启动计时器
    const startTimer = () => {
        startTime = new Date().getTime();
        timerInterval = setInterval(updateTimer, 1000);
    };

    // 更新计时器，计算时间并更新显示
    const updateTimer = () => {
        const currentTime = new Date().getTime();
        const elapsedTime = currentTime - startTime;
        accumulatedTime += elapsedTime;
        startTime = currentTime;

        updatePageTime(currentUrl, elapsedTime);

        // 获取或创建显示元素
        const displayElement = document.getElementById('timeSpentDisplay') || createDisplayElement();
        displayElement.innerHTML = `
            <div>您在此页面已停留</div>
            <div>${formatTime(accumulatedTime)}</div>
            <div id="controlButtons"></div>
        `;

        // 添加控制按钮
        createControlButtons();
    };

    // 创建显示时间的元素
    const createDisplayElement = () => {
        const displayElement = document.createElement('div');
        displayElement.id = 'timeSpentDisplay';
        displayElement.style.position = 'fixed';
        displayElement.style.bottom = '0px';
        displayElement.style.left = '0px';
        displayElement.style.padding = '10px';
        displayElement.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
        displayElement.style.border = '1px solid #ccc';
        displayElement.style.borderRadius = '5px';
        displayElement.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
        displayElement.style.zIndex = '9999';
        displayElement.style.fontSize = '14px';
        displayElement.style.color = '#333';
        document.body.appendChild(displayElement);
        return displayElement;
    };

    // 格式化时间
    const formatTime = (milliseconds) => {
        const totalSeconds = Math.floor(milliseconds / 1000);
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        if (hours > 0) {
            return `${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
        } else if (minutes > 0) {
            return `${minutes} 分钟 ${seconds} 秒`;
        } else {
            return `${seconds} 秒`;
        }
    };

    // 创建控制按钮
    const createControlButton = (text, onClick) => {
        const button = document.createElement('button');
        button.textContent = text;
        button.style.marginLeft = '10px';
        button.style.padding = '5px 10px';
        button.style.border = 'none';
        button.style.borderRadius = '3px';
        button.style.backgroundColor = '#1C1C1C';
        button.style.color = '#fff';
        button.style.cursor = 'pointer';
        button.addEventListener('click', onClick);
        return button;
    };

    // 创建控制面板
    const createControlButtons = () => {
        const controlPanel = document.getElementById('controlButtons');

        if (controlPanel) {
            controlPanel.innerHTML = '';

            const pauseButton = createControlButton('暂停', () => {
                clearInterval(timerInterval);
                pauseButton.style.display = 'none';
                resumeButton.style.display = 'inline-block';
            });

            const resumeButton = createControlButton('继续', () => {
                startTimer();
                resumeButton.style.display = 'none';
                pauseButton.style.display = 'inline-block';
            });

            const resetButton = createControlButton('重置', () => {
                accumulatedTime = 0;
                startTime = new Date().getTime();
                updatePageTime(currentUrl, 0);
                const displayElement = document.getElementById('timeSpentDisplay');
                if (displayElement) {
                    displayElement.innerHTML = `
                        <div>您在此页面已停留</div>
                        <div>${formatTime(accumulatedTime)}</div>
                        <div id="controlButtons"></div>
                    `;
                    createControlButtons();
                }
            });

            resumeButton.style.display = 'none';
            controlPanel.appendChild(pauseButton);
            controlPanel.appendChild(resumeButton);
            controlPanel.appendChild(resetButton);
        }
    };

    // 页面加载完成后启动计时器并创建控制面板
    window.addEventListener('load', () => {
        startTimer();
    });

    // 页面卸载前更新最后的停留时间
    window.addEventListener('beforeunload', () => {
        const currentTime = new Date().getTime();
        const elapsedTime = currentTime - startTime;
        updatePageTime(currentUrl, elapsedTime);
    });

})();
欢迎访问Greasy Fork镜像
