网站页脚美化—时间统计工具

Leapan 发布于 29 天前 46 次阅读


有些时候,我们希望自己的网站页脚能更加有趣一些。

就像这样(93 & 博客)。
或是这样(转载自懒猫)。

不难发现,一个能足够吸引人的页脚能让访客在网站停留时间更长,给人一种焕然一新的感受。 

接下来,我就来介绍一种统计网站运行时间的工具。

操作

在你的网站文件里找到footer.php文件,一般来说位于/www/wwwroot/你的网站/wp-content/themes/主题名内。

当然,你也可以直接在WordPress的后台里点击外观→主题文件编辑器,在里面修改文件。 

在合适的地方粘贴以下代码:

<span class="uptime-display" id="uptimeDisplay" style="color: #636363;">加载中...</span>
<!-- 这里采用十六进制颜色代码,你可以替换成其他的颜色 -->

<script>
    // 设置网站的启动日期(请替换为你的实际日期)
    var startDate = new Date('2024-02-22T23:43:41').getTime(); // 示例本站启动日期的时间戳,请替换成你的网站实际启动日期

    function updateUptime() {
        var now = new Date().getTime(); // 获取当前时间的时间戳(毫秒)
        var elapsed = now - startDate; // 计算从启动日期到当前时间经过的毫秒数

        // 转换毫秒为天、小时、分钟、秒
        var days = Math.floor(elapsed / (1000 * 60 * 60 * 24));
        var hours = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((elapsed % (1000 * 60)) / 1000);

        // 更新页面上的显示内容,可以将本站已稳定运行字样替换你想要的其他字样
        document.getElementById('uptimeDisplay').textContent = '本站已稳定运行 ' +
            days + ' 天 ' +
            hours + ' 小时 ' +
            minutes + ' 分钟 ' +
            seconds + ' 秒';
    }

    // 页面加载时立即调用一次updateUptime函数
    updateUptime();

    // 设置一个定时器,每秒调用一次updateUptime函数来更新显示内容
    setInterval(updateUptime, 1000);
</script>

退出,然后保存,便可以看见效果

大功告成!

最后更新于 2025-01-26