前言

这是一篇早已写好但未曾发布的文章，目前本站已转到 Typecho 平台，该教程已不适用，今晚在此发布出来，供各位有需要的 Wordpress 站长参考使用。

网上冲浪多了，经常见到一些站点的页面底部有 “网站已稳定运行：xxxx 年 xx 月 xx 日 xx 时 xx 分 xx 秒” 的字样，做为一名博客站长，个人觉得这个还是挺有意思的，它记录着网站的开通时间，好比个人生日，具有一定的纪念意义。

久而久之，随着持续对博客的运营，会发现自己总有收获、有成长..., 这也许是最大的财富吧～～

为了实现这一效果，经本人一番网冲浪后并勇于踩坑，最后将可用的代码及教程分享给有需要的你。

说明：代码并非本人原创，是本人从网络收集、改善而来，版权属原作者所有，在此感谢原创作者！

实现代码

下方提供四种风格代码，你只需将其添加到你 Wordpress 站点主题源码中所对应的位置上即可。

例如：绝大情况下，是将该效果添加到网站的页脚下。在 wordpress 主题中，一般都有 footer.php 这个这个文件，它所定义的就是页脚显示的内容，因此，只需将下方代码添加到该文件中合适的位置即可！

通常 footer.php 文件中都会有 <?php wp_footer(); ?> 这个函数，只需将下方效果代码粘贴到该函数之前即可！

效果一

效果：

==说明==：根据个人实际情况，修改效果代码中注释 —— //建站时间 所在行对应的建站时间即可，注意不可变更时间的定义格式！

实现代码：

<span id="momk"></span>
<span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">function NewDate(str) {
    str = str.split('-');
    var date = new Date();
    date.setUTCFullYear(str[0], str[1] - 1, str[2]);
    date.setUTCHours(0, 0, 0, 0);
    return date;
  }

  function momxc() {
    var birthDay = NewDate("2017-8-21");  // 建站时间
    var today = new Date();
    var timeold = today.getTime() - birthDay.getTime();
    var sectimeold = timeold / 1000
    var secondsold = Math.floor(sectimeold);
    var msPerDay = 24 * 60 * 60 * 1000;
    var e_daysold = timeold / msPerDay;
    var daysold = Math.floor(e_daysold);
    var e_hrsold = (daysold - e_daysold) * -24;
    var hrsold = Math.floor(e_hrsold);
    var e_minsold = (hrsold - e_hrsold) * -60;
    var minsold = Math.floor((hrsold - e_hrsold) * -60);
    var seconds = Math.floor((minsold - e_minsold) * -60).toString();
    document.getElementById("momk").innerHTML = "本站已安全运行: " + daysold + " 天 " + hrsold + " 时 " + minsold + " 分 " + seconds + " 秒 ";
    setTimeout(momxc, 1000);
  }
  momxc();</script>
<style>#momk { animation: change 10s infinite; font-weight: 800; } @keyframes change { 0% { color: #5cb85c; } 25% { color: #556bd8; } 50% { color: #e40707; } 75% { color: #66e616; } 100% { color: #67bd31; } }</style>

效果二

效果：

实现代码：

本站已安全运行:
<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("08-21-2017 23:32:13");  //建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

效果三

效果：

实现代码：

博客已安全运行： <span id = span_dt_dt style = "color: #2F889A;" ></span>
<script language=javascript>function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("8/8/2008 14:30:28");  // 建站时间
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#C40000>'+daysold+'</font> 天 <font style=color:#C40000>'+hrsold+'</font> 时 <font style=color:#C40000>'+minsold+'</font> 分 <font style=color:#C40000>'+seconds+'</font> 秒';
}
show_date_time();</script>"

效果四

效果：

实现代码：

博客已安全运行：<span id="sitetime" style="color: #0196e3;"></span>
<script language=javascript>
    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();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2008,8,8,14,30,28);   // 建站时间
        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>

教程结束，喜欢的赶紧去试试吧~~

如何给Wordpress站点添加网站已稳定运行时长信息