网站已运行时间动态跳动【HTML】

katelya

前言

此代码适合很多场景，像什么博客、论坛、个人导航页，加上它都是不错的选择，而且样式也挺好看的，接下来话不多说上码！

代码

<style>
    #uptime {
        position: fixed; /* 固定定位 */
        bottom: 0; /* 距离底部0 */
        left: 0; /* 距离左侧0 */
        width: 100%; /* 宽度为100% */
        font-family: Arial, sans-serif;
        font-size: 18px;
        color: #333;
        text-align: center; /* 文本居中 */
        padding: 15px;
        background-color: rgba(255, 255, 255, 0.2); /* 背景颜色透明 */
        border-top: 1px solid #ddd; /* 上边框 */
        border-radius: 8px 8px 0 0; /* 上边圆角 */
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 上方阴影 */
    }

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

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

<script>
    // 网站建站日期
    const launchDate = new Date('2024-08-14'); // 修改为您的建站日期

    // 计算日期差异
    const calculateUptime = (startDate, endDate) => {
        const diffTime = endDate - startDate; // 时间差，单位毫秒
        const diffSeconds = Math.floor(diffTime / 1000); // 秒数
        const diffMinutes = Math.floor(diffSeconds / 60); // 分钟数
        const diffHours = Math.floor(diffMinutes / 60); // 小时数
        const diffDays = Math.floor(diffHours / 24); // 天数
        const hours = diffHours % 24; // 当前天的小时数
        const minutes = diffMinutes % 60; // 当前小时的分钟数
        const seconds = diffSeconds % 60; // 当前分钟的秒数

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

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

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

    // 初始更新
    updateUptime();
</script>

小白看过来（使用方法）

直接把上面的代码放入你网站的index.html/php的footer页脚
还有那个建站日期自己改一下
style可以自行修改是这个文字背后的背景框有颜色、大小、阴影等等
script自己整个复制进去就好了

END

l160962937

感谢分享！

8211059a

尝试过了，非常好用，右键txt打开index.html文件，复制到index.html文件底部即可，保存，替换即可

shuai2051

楼主的代码JS部分使用的是UTC时间，我改了一个北京时间的，可供参考

[JavaScript] 纯文本查看 复制代码

    // 网站建站日期，假设为北京时间
    const launchDate = new Date('2024-08-21T00:00:00+08:00'); // 北京时间建站日期

    // 获取当前时间（自动处理时区为当地时间）
    const getCurrentBeijingTime = () => {
        const now = new Date();
        // 将当前时间转换为UTC，然后再调整为北京时间（UTC+8）
        const beijingOffset = 8 * 60; // 北京时间与UTC的分钟差
        const localOffset = now.getTimezoneOffset(); // 本地时区与UTC的分钟差
        const offsetDifference = beijingOffset + localOffset; // 与北京时间的差异
        return new Date(now.getTime() + offsetDifference * 60000); // 调整后的北京时间
    };

    // 计算日期差异
    const calculateUptime = (startDate, endDate) => {
        const diffTime = endDate - startDate; // 时间差，单位毫秒
        const diffSeconds = Math.floor(diffTime / 1000); // 秒数
        const diffMinutes = Math.floor(diffSeconds / 60); // 分钟数
        const diffHours = Math.floor(diffMinutes / 60); // 小时数
        const diffDays = Math.floor(diffHours / 24); // 天数
        const hours = diffHours % 24; // 当前天的小时数
        const minutes = diffMinutes % 60; // 当前小时的分钟数
        const seconds = diffSeconds % 60; // 当前分钟的秒数

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

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

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

    // 初始更新
    updateUptime();

WePojie

谢谢分享，很好用

pxhzai

很棒，我直接丢到ai  然后他帮我加入到网站代码里
预览 https://poe.qq62.cn/

superstarzjh

感谢分享

甜筒不甜

简单好用 原本都没打算加这种功能，看到了顺手就加上