一直想给博客加一个建站时间的模块，但是看别人的解决方法都略微有点麻烦（懒捏），因此不断在网上找寻，最后在https://www.11zhang.com/391.html找到了解决方案。

不过该代码有一个BUG，就是在站内跳转时，建站的时间就会显示不出来，需要刷新网站的页面才可以重新看到，这主要是因为原代码没有一个很好的自动重新执行的功能，针对此问题，也是询问ChatGPT老师，很快啊，一下子就帮我解决的问题。可以使用JavaScript事件监听器重新执行脚本，在页面加载和每次跳转时，监听并执行代码，用DOMContentLoaded或popstate事件。

那下面就是本博客使用的代码了，可以放在博客的小工具里的自定义HTML中即可。具体实现效果就是左侧栏功能里的效果。

<i class="fa fa-cog fa-spin fa-1x fa-fw"></i>
<span>本站已运行 <span id="days" style="font-weight:800; color:#009688;"> </span> 天</span>
<script>
  function updateDays() {
    let s1 = '2024-2-5';  // 设置建站时间
    s1 = new Date(s1.replace(/-/g, "/"));
    s2 = new Date();
    let days = s2.getTime() - s1.getTime();
    let number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
    document.getElementById('days').innerHTML = number_of_days;
  }

  // 初次加载时执行
  updateDays();

  // 监听前进/后退或内部跳转事件
  window.addEventListener('popstate', updateDays);
  window.addEventListener('pushstate', updateDays);
</script>

其中s1是建站时间，根据自己的建站时间修改即可。然后上面的color部分是建站时间天数的那个颜色，三位16进制数，改成自己喜欢的颜色即可。字体大小也可以根据自己的需求修改font-weight。

如果你想实现下面这样每一秒都随时间动态变化，也可以尝试下面的代码：

<div style="text-align: center; margin: 20px 0;">
    <p style="font-size: 32px; font-weight: bold; color: #333;">
        本博客始建于 2024 年 02 月 5 日
    </p>
    <p class="timer" style="font-size: 24px; color: #333;">
        距今已艰难运行 0 年 0 天 0 时 0 分 0 秒
    </p>
 
    <script>
        // 博客开始时间
        const startTime = new Date("2024-02-05T00:00:00");
 
        // 更新运行时间
        function updateTimer() {
            const now = new Date();
            const diff = now - startTime; // 时间差（毫秒）
 
            const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
            const days = Math.floor((diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
            // 更新到页面
            document.querySelector(".timer").textContent = 
                `距今已艰难运行 ${years} 年 ${days} 天 ${hours} 时 ${minutes} 分 ${seconds} 秒`;
        }
 
        // 每秒更新一次
        setInterval(updateTimer, 1000);
 
        // 初始化显示
        updateTimer();
    </script>
</div>

font-size、color、document.querySelector(".timer").textContent都可以根据大家自己的喜好修改，反正各位的代码能力应该都比我强，这些都是小菜一碟了。和前面的用法一样，放到任何文章或者小工具的自定义HTML里即可。