// ==UserScript==
// @name 页面访问计时器
// @version 0.4
// @description 记录并显示用户在每个页面的停留时间
// @author lbihhe
// @match *://*/*
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/1317293
// @downloadURL none
// ==/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 = `
您在此页面已停留
${formatTime(accumulatedTime)}
`;
// 添加控制按钮
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 = `
您在此页面已停留
${formatTime(accumulatedTime)}
`;
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);
});
})();