使用JavaScript为网站显示运行时间代码案列，附代码！-前端开发-阁主学习小站

摘要：

本文主要以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
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。