记录成长
分享快乐

JavaScript 为网站添加运行时间显示

昨天分享了一篇 WordPress修改页面底部版权为网站建设起止年份 的文章,使用该方法你可以让自己的网站动态地更新版权年份(包含起止年份),但是有些小伙伴可能希望能够动态地显示网站运行了多少天,甚至于说运行了几分几秒了。这样的话我们就需要获取当前时间与建站时间的时间间隔并进行显示。

JavaScript 生成时间信息

下面的方法是通过 JavaScript 的 Date() 方法获取当前以及建站的时间(建站时间需手动修改为你网站的建站时间),然后通过 getTime() 方法计算的二者时间间隔(getTime() 方法会获取目标时间距 1970 年 1 月 1 日之间的毫秒数),最后向下取整获取天数、小时数、分钟数、秒数来生成网站运行时间的,具体代码如下:

<script type="text/javascript">
    function show_site_runtime(){
	window.setTimeout("show_site_runtime()",1000); // 每秒运行一次函数
	X=new Date("01/03/2017 00:00:00"); //在这里修改你的建站时间
	Y=new Date();
	T=(Y.getTime()-X.getTime()); // 获取当前时间与指定时间之间的时间间隔(ms)	
	i=24*60*60*1000;
	d=T/i;
	D=Math.floor(d); // 计算天数并向下取整
	h=(d-D)*24;
	H=Math.floor(h); // 计算剩余不足一天的小时数并向下取整
	m=(h-H)*60;
	M=Math.floor(m); // 计算剩余不足一小时的分钟数并向下取整
	s=(m-M)*60
	S=Math.floor(s); // 计算剩余不足一分钟的秒数并向下取整
	site_runtime.innerHTML= Y+D + " 天 " + H + " 小时 " + M + " 分 " + S + " 秒 "
    }
	show_site_runtime();
</script>

注意:将代码中的初始建站时间修改为你网站的建站时间。

HTML 前端输出

在你需要输出的地方添加如下代码即可:

<p>>>> 网站已平稳运行:<span id="site_runtime" style="color: #24a0f0;"></span><<<</p>

样式的话我没怎么做调整,大家自己根据自己情况调整下吧。

赞(1) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » JavaScript 为网站添加运行时间显示
分享到: 更多 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    路过,表示这个JS还是不错的

    久伴博客   | Windows 7 | Chrome 69.0.3493.3 | 4个月前 (08-08)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏