wordpress 显示网站运行天数

如果想在网站底部显示已运行3年5月108天12小时38分13秒这样的信息，就需要对日期中的年月日时分秒分别进行计算，例如某站的建站时间为2017年2月26日13时28分18秒，等2021年2月26日14时50分34秒的时候，网站已运行时间应该显示为4年0天1小时22分16秒，但网上大部分教程没有考虑闰年有366天的情况，按365天计算，导致计算出来的结果多出一天，显示的结果为2年1天1小时22分16秒，跟实际情况有点儿出入，所以我重新改写了一下日期的计算方法，供大家参考与学习使用。

每秒刷新一次，效果预览如下：

PHP代码

<span class="running-days">网站已稳定运行 <span class="blue;" id="htmer_time"></span></span>

自定义JS方法calculateDiffTime，用来获取已运行时间

<script type="text/javascript">
/**
* Author:夏日阳光
* Author URL:https://www.pieruo.com
* Description:计算网站运行天数，本方法对闰年进行了处理
*/
function calculateDiffTime (){
    var start_time = '2018/09/09 00:00:00'; // 网站开通时间
    var fisrtDay = "2021/01/01 00:00:00";//用来计算闰年数，分两种情况，当前时间小于2021年和当前时间大于2021年（因为本站的建站时间为2018年，2018年后的第一个闰年是2020年，故2020年是一个分界线）
	
    var sDate = new Date(start_time); // 开始时间
    var eDate = new Date(); // 结束时间
    var sY  = sDate.getFullYear();     
    var sM  = sDate.getMonth()+1;
    var sD  = sDate.getDate();
    var eY  = eDate.getFullYear();
    var eM  = eDate.getMonth()+1;
    var eD  = eDate.getDate();
    // ------------------------------
    //计算出相差年数
    var years = (eY >= sY && eM >= sM && eD >= sD) ? (eY - sY) : (eY - sY - 1);
    // 计算出相差天数
    var rns = (eDate > new Date(fisrtDay)) ? (Math.floor(years / 4) + 1) : 0; // 计算闰年数，从2021年1月1日算起，因2020年是闰年，没有计算在内，所以总数要加1
    var level = eDate.getTime() - sDate.getTime() - (rns + years * 365) * 24 * 60 * 60 * 1000; //计算年数后剩余的毫秒数，闰年按366天计
    var days = Math.floor(level/(24*3600*1000));
    // 计算出相差小时数
    var leave1 = level % (24*3600*1000); // 计算天数后剩余的毫秒数
    var hours = Math.floor(leave1/(3600*1000));
    // 计算相差分钟数
    var leave2 = leave1 % (3600*1000); // 计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2/(60*1000));
    // 计算相差秒数
    var leave3 = leave2 % (60*1000); // 计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3/1000);
 
    hours = hours < 10 ? ('0' + hours) : hours;
    minutes = minutes < 10 ? ('0' + minutes) : minutes;
    seconds = seconds < 10 ? ('0'+seconds) : seconds;
 
    var result = "<font class="red"> "+days + " </font>天<font class="red"> "+ hours + " </font>小时<font class="red"> " + minutes + " </font>分<font class="red"> " + seconds + " </font>秒";
    result = (years > 0 ) ? (" <font class="red"> "+years + " </font>" + "年" + result) : result;
    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
setInterval(calculateDiffTime, 1000);
</script>

CSS美化样式：

.footer .running-days .blue {
    color: #2F889A;
}
.footer .running-days .red {
    color: #C40000;
}

本文已通过「原本」原创作品认证，转载请注明文章出处及链接。

wordpress 显示网站运行天数

发表评论