经常在一些网站上看到网站运行时间,比如“网站已萌萌哒运行了89天13小时28分40秒”。并且时间是动态变化的,今天抽时间用JS实现了一下,有兴趣的朋友可以一起研究下。
实现效果
由于WordPress文章插入JS不安全,所以iframe引用一下:
JS代码
runTime方法,可接收6个参数,分别是年月日时分秒,系统将自动生成入参日期至今的时间,并每秒更新。
function runTime(y=1970,m=0,d=1,h=0,mm=0,s=0){ window.setTimeout(function(){runTime(y,m,d,h,mm,s)}, 1000); var diff = newDate() - newDate(y,m-1,d,h,mm,s); var days = Math.floor(diff/(24*3600*1000)); var hours = Math.floor((diff%(24*3600*1000))/(3600*1000)); var minutes = Math.floor(diff%(3600*1000)/(60*1000)); var seconds = Math.floor(diff%(60*1000)/1000); if(document.getElementById("siteTime")) document.getElementById("siteTime").innerHTML=days+"天"+hours+"小时"+minutes+"分"+seconds+"秒"; else document.write('<span id="siteTime">'+days+"天"+hours+"小时"+minutes+"分"+seconds+"秒</span>"); }
调用方法,根据实际情况更改参数为网站上线时间即可
runTime(2017,12,20,8,05,20);
在HTML中调用
网站已萌萌哒运行了<script>runTime(2017,12,20,8,05,20);</script>
源码示例
代码已托管于Coidng.net地址:yhf7952/JS_Website_Runtime
GitHub地址:yhf7952/JS_Website_Runtime
演示地址:https://yhf7952.coding.me/JS_Website_Runtime/
iframe引用方法
<iframe src="https://yhf7952.coding.me/JS_Website_Runtime/" width="400" height="40" frameborder="0" scrolling="no"> 您的浏览器不支持 iframe 标签 </iframe>
起始时间不严谨?
质疑作弊,或起始时间不严谨的同学,可以查一下自己域名的whois信息,里边包含了详细的域名申请时间。