给博客添加运行时间

侧栏自定义内容

    <div id="uptime" class="cat_block">Loading...</div>

自定义CSS

    #uptime {
        font-family: Arial, sans-serif;
        font-size: 15px;
        color: #333;
        text-align: center; /* 文本居中 */
        padding: 15px;
    }

    .highlight {
        color: orange; /* 橙色 */
        font-weight: bold; /* 粗体 */
    }

自定义JS

    // 网站建站日期（假设为北京时间）
    const launchDate = new Date('2024-08-14T00:00:00+08:00'); // 修改为您的建站日期

    // 获取当前时间（浏览器会自动处理时区）
    const getCurrentBeijingTime = () => {
        return new Date(); // 自动处理本地时区
    };

    // 计算日期差异
    const calculateUptime = (startDate, endDate) => {
        const diffTime = endDate - startDate; // 时间差，单位毫秒
        const seconds = Math.floor((diffTime / 1000) % 60);
        const minutes = Math.floor((diffTime / (1000 * 60)) % 60);
        const hours = Math.floor((diffTime / (1000 * 60 * 60)) % 24);
        const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));

        return { days, hours, minutes, seconds };
    };

    // 更新显示的时间
    const updateUptime = () => {
        const currentDate = getCurrentBeijingTime(); // 获取当前时间
        const { days, hours, minutes, seconds } = calculateUptime(launchDate, currentDate);
        document.getElementById('uptime').innerHTML = 
            `网站已运行 <span class="highlight">${days}</span> 天 <span class="highlight">${hours}</span> 小时 <span class="highlight">${minutes}</span> 分钟 <span class="highlight">${seconds}</span> 秒`;
    };

    // 每秒更新一次显示的时间
    setInterval(updateUptime, 1000);

    // 初始更新
    updateUptime();