页脚添加本站运行时间JS脚本
看到有些网站在页脚处显示本站运行时间,感觉很酷,其实此功能js代码不多,且看本文如何实现这一效果。
看到有些网站在页脚处显示本站运行时间,感觉很酷,其实此功能js代码不多,且看本文如何实现这一效果。
文章目录
一、本站运行效果
下面是本站Dotnet9页脚显示运行时间的效果图:

二、具体JavaScript代码
具体js脚本代码如下,其中startTime填写本站建站时间,代码设置一个定时1秒的定时器,用当前时间与建站时间之差简单计算运行时间,未去掉空格版代码:
<span id="runtimeSpan"/>
<script type="text/javascript">
function showRuntime(){
window.setTimeout("showRuntime()",1000);
var startTime=new Date("11/12/2019 00:00:00");
var nowTime=new Date();
var timestamp=(nowTime.getTime()-startTime.getTime());
var oneDayMilliseconds=24*60*60*1000;
var totalDaysTmp=timestamp/oneDayMilliseconds;
var totalDays=Math.floor(totalDaysTmp);
var yuHoursTmp=(totalDaysTmp-totalDays)*24;
var yuHours=Math.floor(yuHoursTmp);
var yuMinutesTmp=(yuHoursTmp-yuHours)*60;
var yuMinutes=Math.floor((yuHoursTmp-yuHours)*60);
var yuSeconds=Math.floor((yuMinutesTmp-yuMinutes)*60);
runtimeSpan.innerHTML="本站已运行: "+totalDays+"天"+yuHours+"小时"+yuMinutes+"分"+yuSeconds+"秒";
}
showRuntime();
</script>
三、使用JS压缩工具压缩代码
上面的代码未压缩,对网站运行速度多多少少有点点影响,一般js或者css样式在上传之前,都要进行压缩的,即去空格处理。
站长使用在线JS/CSS/HTML压缩在线压缩的上述代码,如下图,左侧为原js代码,点击CSS压缩,右侧为压缩后的js代码:

下面是压缩后的JS代码,可直接复制用于页脚使用,无须任何修改:
<span id="runtimeSpan"/><script type="text/javascript">function showRuntime(){window.setTimeout("showRuntime()",1000);var startTime=new Date("11/12/2019 00:00:00");var nowTime=new Date();var timestamp=(nowTime.getTime()-startTime.getTime());var oneDayMilliseconds=24*60*60*1000;var totalDaysTmp=timestamp/oneDayMilliseconds;var totalDays=Math.floor(totalDaysTmp);var yuHoursTmp=(totalDaysTmp-totalDays)*24;var yuHours=Math.floor(yuHoursTmp);var yuMinutesTmp=(yuHoursTmp-yuHours)*60;var yuMinutes=Math.floor((yuHoursTmp-yuHours)*60);var yuSeconds=Math.floor((yuMinutesTmp-yuMinutes)*60);runtimeSpan.innerHTML="本站已运行: "+totalDays+"天"+yuHours+"小时"+yuMinutes+"分"+yuSeconds+"秒"}showRuntime();</script>
四、用于站点
一般网站,直接将上述代码粘贴到页脚即可;而本站使用的JustNews主题,可以不用直接修改footer代码,直接在 主题设置=》页脚设置=》版权信息 中添加此段JS代码,下图是本站添加截图:

您尝试在您的站点添加本站运行时间脚本了吗?试试吧,非常酷哦!
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/2213.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。