HTML日期时间显示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54089340/article/details/127694996

显示年月
显示日期
显示星期几
显示当前时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				margin: 0;
				padding: 0;
				position: absolute;
				width: 400px;
				height: 500px;
				background-color: white;
				left: 30%;
				top: 20%;
				box-sizing: border-box;
				border: 1px solid black;
			}

			div>#d1 {
				display: flex;
				position: relative;
				width: 100%;
				height: 15%;
				background-color: deepskyblue;
				align-items: center;
				justify-content: center;
				font-size: 20px;
			}

			div>#d2 {
				display: flex;
				position: relative;
				width: 100%;
				height: 30%;
				align-items: center;
				justify-content: center;
				font-size: 100px;
				font-weight: 1000;
			}

			div>#d3 {
				display: flex;
				position: relative;
				width: 100%;
				height: 45%;
				background-color: royalblue;
				align-items: center;
				justify-content: center;
				font-size: 100px;
				font-weight: 1000;
			}

			div>#d4 {
				display: flex;
				position: relative;
				width: 100%;
				height: 10%;
				background-color: lightblue;
				align-items: center;
				justify-content: center;
				/* font-size: px; */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 年月 -->
			<div id="d1">

			</div>
			<!-- 日 -->
			<div id="d2">

			</div>
			<!-- 星期 -->
			<div id="d3">

			</div>
			<!-- 时分秒 -->
			<div id="d4">

			</div>
		</div>
		<script>
			var d1 = document.getElementById("d1");
			var d2 = document.getElementById("d2");
			var d3 = document.getElementById("d3");
			var d4 = document.getElementById("d4");
			var timer = setInterval(start, 1000);

			function start() {
				var time = new Date();
				var year = time.getFullYear();
				var month = time.getMonth() < 9 ? "0" + time.getMonth() : time.getMonth() + 1;
				var day = time.getDate();
				var week = time.getDay();
				d1.innerHTML = year + "年" + month + "月";
				d2.innerHTML = day;

				d3.innerHTML = switchWeek(week);
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				d4.innerHTML = h + " : " + m + " : " + s;
			}

			function switchWeek(num) {
				var week = "周日";
				switch (num) {
					case 1:
						week = "周一";
						break;
					case 2:
						week = "周二";
						break;
					case 3:
						week = "周三";
						break;
					case 4:
						week = "周四";
						break;
					case 5:
						week = "周五";
						break;
					case 6:
						week = "周六";

				}
				return week;
			}
		</script>
	</body>
</html>