页面访问计时器

记录并显示用户在每个页面的停留时间
目前為 2024-06-17 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         页面访问计时器
// @version      0.1
// @description  记录并显示用户在每个页面的停留时间
// @author       lbihhe
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1317293
// ==/UserScript==

(function() {
    'use strict';

    // 定义全局变量用于存储开始时间和累计时间
    let startTime;
    let accumulatedTime = 0;

    // 当前页面的 URL
    const currentUrl = window.location.href;

    // 获取存储的时间数据，如果不存在则返回空对象
    function getTimeData() {
        let storedData = localStorage.getItem('timeData');
        return storedData ? JSON.parse(storedData) : {};
    }

    // 更新页面的停留时间
    function updatePageTime(url, timeSpent) {
        let timeData = getTimeData();
        if (!timeData[url]) {
            timeData[url] = 0;
        }
        timeData[url] += timeSpent;
        localStorage.setItem('timeData', JSON.stringify(timeData));
    }

    // 启动计时器
    function startTimer() {
        startTime = new Date().getTime();
        setInterval(updateTimer, 1000); // 每秒更新一次计时器
    }

    // 更新计时器并显示页面的停留时间
    function updateTimer() {
        let currentTime = new Date().getTime();
        let elapsedTime = currentTime - startTime;
        accumulatedTime += elapsedTime;
        startTime = currentTime;

        // 更新页面停留时间到 localStorage
        updatePageTime(currentUrl, elapsedTime);

        // 显示停留时间的样式
        let style = `
            position: fixed;
            bottom: 10px;
            left: 0px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.6); /* 背景色透明度为60% */
            border: 1px solid #ccc;
            z-index: 9999;
            font-size: 14px;
            line-height: 1.5; /* 行高增加，双行显示 */
        `;

        // 创建或更新显示停留时间的元素
        let displayElement = document.getElementById('timeSpentDisplay');
        if (!displayElement) {
            displayElement = document.createElement('div');
            displayElement.id = 'timeSpentDisplay';
            document.body.appendChild(displayElement);
        }
        displayElement.setAttribute('style', style);
        displayElement.innerHTML = `
            <div>您在此页面已停留</div>
            <div>${formatTime(accumulatedTime)}</div>
        `;

        // 转换毫秒为人类可读时间格式
        function formatTime(milliseconds) {
            let totalSeconds = Math.floor(milliseconds / 1000);
            let hours = Math.floor(totalSeconds / 3600);
            let minutes = Math.floor((totalSeconds % 3600) / 60);
            let seconds = totalSeconds % 60;
            return `${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
        }
    }

    // 页面加载完成后启动计时器
    window.addEventListener('load', startTimer);

    // 在页面关闭前更新最终的停留时间
    window.addEventListener('beforeunload', function() {
        let currentTime = new Date().getTime();
        let elapsedTime = currentTime - startTime;
        updatePageTime(currentUrl, elapsedTime);
    });

})();