wordpress 显示网站运行天数

发布于 2019-02-26

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;
}
喜欢 2
奋楫笃行,臻于至善!

相关文章

BEGIN 主题搜索结果页面添加标题图片

BEGIN 主题可以给文章分类页面、独立页面以及文章详情页面添加标题图片,但是在搜索结果页面及 404 页面却无法通过配置添加标题图片,本文简单分享一下给搜索结果页面和 404 页面添加标题图片,以及...
阅读全文

WordPress 文章评论设置分页按时间倒序排序

WordPress 评论默认是按发布的时间顺序排列的,如果我们想按照时间倒序排列,可以根据本文的方法修改。 1、修改comment-template.php 编辑文件 wp-includes/comm...
阅读全文

BEGIN 主题最新文章页面添加加载更多按钮

使用 Begin 主题的博主可能都发现过这样一个问题:如果设置杂志布局,博客页面(本站叫最新文章)是不显示加载更多按钮图标的,而其他所有带分页的页面都显示。如果不显示加载更多按钮图标的话,我们就只能通...
阅读全文

使用 LetterAvatar 脚本生成首字图片替代默认评论头像

Gravatar 是全球通用头像,如果我们没有设置 Gravatar 头像,那么在网站上留言或评论就会显示默认的头像或者随机头像,这样的话用户体验不是很好。今天为大家分享一下使用 LetterAvat...
阅读全文

WordPress 文章链接地址 ID 不连续解决方法

Wordpress 默认情况下发布的文章 ID 不是连续的,是因为 Wordpress 自动草稿、文章修订版、页面、菜单、媒体等功能都要占用 ID,所以发布的文章 ID 一般是不连续的。今天为大家分享...
阅读全文

使用 iconfont 阿里矢量图标为网站添加图标的方法

Iconfont 是一个开源的矢量图标管理平台,它的图标库非常丰富,大概有一百三十多万个。Iconfont 可以按照需求定制图标字体库,还能随时修改,最重要的字体图标库只有 100 多 K。今天就来为...
阅读全文

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注