JavaScript经典动态流光时钟

原文链接：你真的会前端css吗？用css做的非常炫酷的时间显示表

效果展示：

CSS代码：

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		font-family: 'Poppins', sans-serif;
	}

	html,
	body {
		display: grid;
		height: 100%;
		place-items: center;
		background: #000;
	}

	.wrapper {
		height: 100px;
		width: 360px;
		cursor: default;
		background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
		border-radius: 10px;
		animation: animate 1.5s linear infinite;
	}

	.wrapper .display,
	.wrapper span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.wrapper .display {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		background: #1b1b1b;
		height: 85px;
		width: 345px;
		border-radius: 6px;
		text-align: center;
	}

	.wrapper .display #time {
		line-height: 85px;
		font-size: 50px;
		font-weight: 600;
		letter-spacing: 1px;
		background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: animate 1.5s linear infinite;
	}

	@keyframes animate {
		100% {
			filter: hue-rotate(360deg);
		}
	}

	.wrapper span {
		height: 100%;
		width: 100%;
		background: inherit;
		border-radius: 10px;
	}

	.wrapper span:first-child {
		filter: blur(10px)
	}

	.wrapper span:last-child {
		filter: blur(20px)
	}
</style>

HTML代码：

<div class="wrapper">
	<div class="display">
		<div id="time">
			<!-- Current Time -->
		</div>
	</div>
	<span></span>
	<span></span>
</div>

JavaScript代码：

<script type="text/javascript">
	setInterval(() => {
		const currentTime = document.querySelector("#time");
		let date = new Date();
		let timeFrame = "AM"; // 时段
		let hours = date.getHours();
		if (hours > 12) {
			timeFrame = "PM";
			hours = hours - 12;
		}
		if (hours < 10) {
			hours = "0" + hours;
		}
		let minutes = date.getMinutes();
		if (minutes < 10) {
			minutes = "0" + minutes;
		}
		let seconds = date.getSeconds();
		if (seconds < 10) {
			seconds = "0" + seconds;
		}
		time.textContent = hours + ":" + minutes + ":" + seconds + " " + timeFrame;
	});
</script>