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

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

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

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

操作

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

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

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

<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>Copy

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

大功告成！