网站底部显示建站时间

九月 22, 2023 / Mr.x / 5阅读 / 0评论/ 分类: 实用
网站底部显示建站时间 — 荣小站
前端 JavaScript 实用

网站底部显示建站时间

网站建站的时间需要展示在网站的底部，记录网站开始的时间，让自己和别人知道站点运行的时间。

描述

网站建站的时间需要展示在网站的底部，记录网站开始的时间，让自己和别人知道站点运行的时间。

很多网站底部都会显示"本站已运行 X 天 X 时 X 分 X 秒"，这是一个很有意义的功能——既能让访客了解网站的历史，也能给自己一个坚持的动力。

效果演示

荣小站已运行：

第一步：添加 HTML

将以下代码放在网站的 </footer> 闭合标签前：

<div>
<span style="color:gray;">建站时间：<span id="sitetime"></span></span>
</div>

⚠️ 注意：上面这个代码放在网站的 </footer> 闭合标签前。

第二步：添加 JavaScript

  • html代码后面引入js代码
    • <script>
function siteTime(){
    window.setTimeout("siteTime()", 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth()+1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    
    // 设置建站时间（修改这里！）
    var t1 = Date.UTC(2021,03,01,00,00,00); 
    
    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = t2-t1;
    
    var diffYears = Math.floor(diff/years);
    var diffDays = Math.floor((diff/days)-diffYears*365);
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
    
    document.getElementById("sitetime").innerHTML = diffYears+"年"+diffDays+"天"+diffHours+"时"+diffMinutes+"分钟"+diffSeconds+"秒";
}
siteTime();
</script>

    完整代码

    <div>
<span style="color:gray;">建站时间：<span id="sitetime"></span></span>
</div>

<script>
function siteTime(){
    window.setTimeout("siteTime()", 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth()+1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    var t1 = Date.UTC(2021,03,01,00,00,00);
    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = t2-t1;
    var diffYears = Math.floor(diff/years);
    var diffDays = Math.floor((diff/days)-diffYears*365);
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
    document.getElementById("sitetime").innerHTML = diffYears+"年"+diffDays+"天"+diffHours+"时"+diffMinutes+"分钟"+diffSeconds+"秒";
}
siteTime();
</script>

    ✅ 完整代码：如果你的网站支持直接在外观底部添加代码，可直接添加完整的代码即可。

    代码详解

    1. Date.UTC() 时间戳

    Date.UTC() 返回距离世界标准时间 1970年1月1日 午夜之间的毫秒数（时间戳）：

    参数说明
    year4位年份值
    month0-11（0=一月，11=十二月）
    day1-31 日期
    hours0-23 小时
    minutes0-59 分钟
    seconds0-59 秒

    2. 时间差计算

    var diff = t2 - t1;  // 当前时间 - 建站时间 = 差值（毫秒）
var diffYears = Math.floor(diff / years);        // 差值 / 365天 = 年
var diffDays = Math.floor((diff/days) - diffYears * 365);  // 剩余天数

    3. 定时更新

    window.setTimeout("siteTime()", 1000);  // 每1000毫秒（1秒）执行一次

    如何修改建站时间

    找到代码中的这一行，修改括号内的数字：

    var t1 = Date.UTC(2021,03,01,00,00,00);
    参数含义示例
    2021年份2021
    03月份（0-11）03 = 4月
    01日期1号
    00,00,00时:分:秒午夜0点

    ⚠️ 注意：月份是 0-11，所以 0 代表一月，3 代表四月。

    常见问题

    • Q: 为什么显示的时间不对？
      A: 检查 Date.UTC() 参数，月份需要减1
    • Q: 如何只显示天数？
      A: 修改 innerHTML 只输出 diffDays
    • Q: 刷新页面时间会重置吗？
      A: 不会，因为是基于建站时间计算的

    建站时间：

    #网站底部显示建站时间(1)

    评论