好看的网页时钟 HTML 代码 - 简单易懂的实现 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>时钟</title>
	<meta charset='utf-8'>
	<style type='text/css'>
		body{
			background-color: #f2f2f2;
		}
		.clock{
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background-color: #fff;
			margin: 50px auto;
			position: relative;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
		}
		.hour{
			width: 6px;
			height: 60px;
			background-color: #000;
			position: absolute;
			top: 50px;
			left: 97px;
			transform-origin: bottom center;
			transform: rotate(30deg);
		}
		.minute{
			width: 4px;
			height: 80px;
			background-color: #000;
			position: absolute;
			top: 40px;
			left: 98px;
			transform-origin: bottom center;
			transform: rotate(60deg);
		}
		.second{
			width: 2px;
			height: 90px;
			background-color: #ff0000;
			position: absolute;
			top: 30px;
			left: 99px;
			transform-origin: bottom center;
			transform: rotate(90deg);
			animation: rotate 60s linear infinite;
			animation-fill-mode: forwards;
		}
		@keyframes rotate{
			from{
				transform: rotate(90deg);
			}
			to{
				transform: rotate(450deg);
			}
		}
	</style>
</head>
<body>
	<div class='clock'>
		<div class='hour'></div>
		<div class='minute'></div>
		<div class='second'></div>
	</div>
	<script type='text/javascript'>
		function setTime(){
			let now = new Date();
			let hour = now.getHours();
			let minute = now.getMinutes();
			let second = now.getSeconds();
<pre><code>		let hourDeg = (hour % 12) * 30 + (minute / 60) * 30;
		let minuteDeg = minute * 6 + (second / 60) * 6;
		let secondDeg = second * 6;

		document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`;
		document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`;
		document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`;
	}

	setInterval(setTime, 1000);
&lt;/script&gt;
</code></pre>
</body>
</html>