HTML页面存活计时实现-优快云博客

本文链接：https://blog.youkuaiyun.com/z_lazy/article/details/101559213

本文介绍了如何在HTML页面中实现计时功能，特别是在网站页尾显示网站存活时间。通过AJAX从后端获取初始时间，确保页面刷新不重置计时。作者分享了自己的代码实现，供他人参考和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因

在网上看到有些网站页尾部分有显示网站存活时间，如下
在这里插入图片描述
这是我自己写完后的截图，它会从网站部署之后开始计时，直至重启服务器后才会重置
需要使用ajax去后端读取写死的当前时间，不然每次刷新页面就会重置时间

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		<b> 
			本站已存活：
			<span id="year"></span>年 
			<span id="day"></span>日
			<span id="hour"></span>时 
			<span id="minute"></span>分
			<span id="second"></span>秒
		</b>
	</div>
	<script>
		var StarTime = 0;
		function getTime(){
			var jsonData = {
					"id" : 1
				};
			$.ajax({
				type : "POST",
				contentType : "application/json",
				url : "/time",
				data : JSON.stringify(jsonData),
				dataType : "json",
				processData : false,
				success : function(parm) {
					StarTime = parm.message;
				},
			});
		}
		getTime();
		setInterval(function() {
			NotRetain();
		}, 500)
		function NotRetain() {
			//不保留小数点
			var NowTime = parseInt(new Date().getTime() );
			//秒
			var time = parseInt((NowTime - StarTime) / 1000)
			var second = parseInt(time%60);
			var minute = parseInt((time/60)%60);
			var hour = parseInt((time/(60*60))%24);
			var day = parseInt((time/(60*60*24))%365);
			var year = parseInt(day/365);
			
			document.getElementById("second").innerHTML = second;
			//分
			document.getElementById("minute").innerHTML = minute;
			//时
			document.getElementById("hour").innerHTML = hour;
			//天
			document.getElementById("day").innerHTML = day;
			//年
			document.getElementById("year").innerHTML = year;
		}
	</script>
</body>
</html>