前言
这是一篇早已写好但未曾发布的文章,目前本站已转到 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>
教程结束,喜欢的赶紧去试试吧~~
2 条评论
非常棒。。
有用,一次成功,感谢!