当前位置：首页 > 行业动态 > 正文

html网站运行时间代码

“`html，setInterval(_=>t.innerHTML=Date.now(),1e3)，

HTML网站运行时间代码实现

核心思路

通过JavaScript记录页面加载时的初始时间,并利用setInterval每秒计算当前时间与初始时间的差值，动态更新页面显示。

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">网站运行时间</title>
    <style>
        #runtime {
            font-family: Arial, sans-serif;
            font-size: 18px;
            color: #333;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="runtime">加载中...</div>
    <script>
        // 记录页面加载时的初始时间
        const startTime = new Date().getTime();
        // 定义更新时间的函数
        function updateRuntime() {
            const now = new Date().getTime();
            const diff = now startTime; // 毫秒差值
            // 将毫秒转换为秒，并计算小时、分钟、秒
            const seconds = Math.floor(diff / 1000);
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;
            // 格式化时间为 HH:MM:SS
            const formattedTime = 
                `${hours.toString().padStart(2, '0')}:` +
                `${minutes.toString().padStart(2, '0')}:` +
                `${remainingSeconds.toString().padStart(2, '0')}`;
            // 更新页面显示
            document.getElementById('runtime').textContent = `运行时间：${formattedTime}`;
        }
        // 每秒更新一次时间
        setInterval(updateRuntime, 1000);
        // 立即执行一次，避免首次延迟1秒
        updateRuntime();
    </script>
</body>
</html>

代码解析表

代码片段 功能说明
const startTime = new Date().getTime(); 记录页面加载时的时间戳（毫秒数）
setInterval(updateRuntime, 1000); 每1000毫秒（1秒）调用一次updateRuntime函数
Math.floor(diff / 1000) 将毫秒差值转换为总秒数
.padStart(2, '0') 确保小时、分钟、秒均为两位数，不足时左侧补零（如5 → 05）
document.getElementById('runtime').textContent 将计算后的时间字符串写入HTML元素<div id="runtime">中

常见问题与解答

问题1：如何让运行时间在页面刷新后继续累计？
解答：
默认情况下，页面刷新后startTime会重置，若需跨刷新累计，可将初始时间存入localStorage： 

// 读取或初始化起始时间
const startTime = localStorage.getItem('startTime') || new Date().getTime();
localStorage.setItem('startTime', startTime);
// 后续计算逻辑不变

注意：此方法依赖浏览器的localStorage，且时间会被永久保留直到手动清除。

问题2：如何修改时间显示格式（例如只显示分钟和秒）？
解答：
调整formattedTime的拼接逻辑，例如仅显示分钟和秒： 

const formattedTime = 
    `${minutes.toString().padStart(2, '0')}:` +
    `${remainingSeconds.toString().padStart(2, '0')}`;

或自定义其他格式（如HH小时MM分SS秒）： 

const formattedTime = 
    `${hours}小时${minutes}分${remainingSeconds}秒`;
运行时间
0

相关文章