如果想在网站底部显示已运行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; }