1. 陈健豪博客首页
  2. WordPress

网站美化:给网站页脚添加“网站已稳定运行”计时效果

前言

偶然的一次机会,在其他博客站点页脚上看到了感觉不错的一个效果:“网站以稳定运行:*天*时*分*秒”,感觉挺不错的,所以也给自己的网站加上了,具体效果可查看网站页脚。在这里分享给大家这个效果的实现方法教程。

效果展示:

网站美化:给网站页脚添加“网站已稳定运行”计时效果

实现方法

这里以WordPress为例,打开主题中的footer.php文件,并在对应的位置添加以下代码:

<!--网站稳定运行代码-->
网站已稳定运行:<span id="website_running_time" style="color: #00BFFF;"><font style="color:#FFF">398</font> 天 <font style="color:#FFF">17</font> 时 <font style="color:#FFF">28</font> 分 <font style="color:#FFF">54</font> 秒</span>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("2/01/2018 6:06:06");
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);
website_running_time.innerHTML='<font style=color:#FFF>'+daysold+'</font> 天 <font style=color:#FFF>'+hrsold+'</font> 时 <font style=color:#FFF>'+minsold+'</font> 分 <font style=color:#FFF>'+seconds+'</font> 秒';}
show_date_time();
</script>

小提示:

  • 第1行与第22行为提示代码内容,已经隐藏,可去除或者保留,不影响效果的实现。
  • 第2行中“网站已稳定运行”可按照自己喜欢改为想要展示的字体,例如:博客已稳定运行、站点已稳定运行…
  • 第2行中color颜色可自行更改,为“天、时、分、秒”四字的颜色。
  • 第6行括号中的时间为本站的建站时间,请根据贵站的建站时间自行更改。(“月/日/年 时:分:秒”)
  • 第19行中color颜色默认为白色(#FFF),可自行更改颜色,为时间的颜色。

修改完后保存文件,并刷新网页即可看到对应的效果。

总结

个人感觉效果实现后看着不错,对于页脚不知道放什么内容的朋友也是一种不错的选择,赶紧去给你的网站也加上网站已稳定运行时间这种效果吧!

相关文章:WordPress显示页面加载耗时、查询次数及消耗内存效果

版权声明:本文为博主原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://chenjianhao.com/12531.html

发表评论

登录后才能评论