使用JavaScript为网站显示运行时间代码案列,附代码!

原创 阁主  2018-07-26 20:05:08  阅读 805 次 评论 1 条
摘要:

本文主要以JavaScript配合HTML实现显示网站运行时间代码!分两个样式供大家参考和学习!

方法一:只显示运行天数 这个简单很多,只显示运行天数。

方法二:显示XX年XX天XX时XX秒,秒数显示为一秒一秒的走动。

Begin!!!!

方法一:

.1.只显示运行天数(☄⊙ω⊙)☄

由于简单,只需要修改参数即可。参考代码注释修改即可!

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>只显示运行天数</title>
	</head>

	<body>
		<!--只显示运行天数-->
		<!--其中11是月份,22是日期,2017是年数,根据自己情况修改一下即可,然后把代码复制到你想要显示的地方。-->
		本站已安全运行了
		<b style="color: red;"><strong>
			<script language="JavaScript" type="text/javascript">
			var urodz = new Date("11/22/2017");
			var now = new Date();
			var ile = now.getTime() - urodz.getTime();
			var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
			document.write(+dni)
			</script>
		</strong></b>天

	</body>

</html>

其中11是月份,22是日期,2017是年数,根据自己情况修改一下即可,然后把代码复制到你想要显示的地方。

方法二:

.2.显示XX年XX天XX时XX秒(☄⊙ω⊙)☄

第二个的代码相对第一种的较多,不过显示靓丽,至于修改也是拷贝到自己想要显示的地方修改个日期即可。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>显示XX年XX天XX时XX秒,秒数显示为一秒一秒的走动</title>
	</head>

	<body>
		<!--第二个的代码相对第一种的较多,不过显示靓丽,至于修改也是拷贝到自己想要显示的地方修改个日期即可。-->
		阁主博客!<br /> 网站稳定运行:
		<span id="htmer_time" style="color: crimson;"></span>

		<!--JavaScript部分-->
		<script>
			function secondToDate(second) {
				if(!second) {
					return 0;
				}
				var time = new Array(0, 0, 0, 0, 0);
				if(second >= 365 * 24 * 3600) {
					time[0] = parseInt(second / (365 * 24 * 3600));
					second %= 365 * 24 * 3600;
				}
				if(second >= 24 * 3600) {
					time[1] = parseInt(second / (24 * 3600));
					second %= 24 * 3600;
				}
				if(second >= 3600) {
					time[2] = parseInt(second / 3600);
					second %= 3600;
				}
				if(second >= 60) {
					time[3] = parseInt(second / 60);
					second %= 60;
				}
				if(second > 0) {
					time[4] = second;
				}
				return time;
			}
		</script>
		<script type="text/javascript" language="javascript">
			function setTime() {
				var create_time = Math.round(new Date(Date.UTC(2017, 11, 22, 18, 20, 02)).getTime() / 1000);
				var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
				currentTime = secondToDate((timestamp - create_time));
				currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天' +
					currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4] +
					'秒';
				document.getElementById("htmer_time").innerHTML = currentTimeHtml;
			}
			setInterval(setTime, 1000);
		</script>
		<!--有关CSS样式自行修改,上面代码中2017, 11, 22, 18, 20, 02分别对应是 年、月、日、时、分、秒,根据自己需要的值修改即可。自此本文讲述完成,如有问题可在下方留言。。
			
		The End-->
	</body>

</html>

有关CSS样式自行修改,上面代码中2017, 11, 22, 18, 20, 02分别对应是 年、月、日、时、分、秒,根据自己需要的值修改即可。自此本文讲述完成,如有问题可在下方留言。。

预览效果:

为了照顾大部分Copy用户,一般在使用之前都要看效果,特此后面考虑加上本栏。

方法一的效果:点我查看

方法二的效果:点我查看

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少!

打开支付宝扫一扫,即可进行扫码打赏哦

本文地址:https://www.mainblog.cn/107.html
版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处!
免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。

发表评论


表情

评论列表

  1. 屋檐
    屋檐  浏览器图标  系统图标 【评论达人 LV.6】  @回复

    很棒的资料、老衲收藏。择日再加到自己站点上! face_36 face_36 face_36 face_36