【前端小实战】实现实时圆形时钟

最新推荐文章于 2024-11-12 17:53:42 发布

原创最新推荐文章于 2024-11-12 17:53:42 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #javascript #html

该文章展示了一个使用HTML、CSS和JavaScript编写的网页时钟动画，时钟包括小时、分钟和秒针，所有指针会实时旋转以显示当前时间。此外，还包括了日期和星期的显示。代码中详细定义了各个元素的样式和动态更新时间的逻辑。

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

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.clock {
				width: 300px;
				height: 300px;
				border: 10px solid darkgray;
				border-radius: 50%;
				margin: 0 auto;
				margin-top: 200px;
				background-color: lightgray;
				position: relative;
			}
			
			.mark {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: darkgray;
				position: absolute;
			}
			
			.twe {
				left: 145px;
				top: 10px;
			}
			
			.thr {
				top: 145px;
				right: 10px;
			}
			
			.six {
				left: 145px;
				bottom: 10px;
			}
			
			.nine {
				top: 145px;
				left: 10px;
			}
			
			.center {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: darkgray;
				position: absolute;
				left: 140px;
				top: 140px;
			}
			
			.pointer {
				position: absolute;
				left: 150px;
				transform-origin: 0;	/* 设置旋转中心为中点 */
			}
			
			.hour {
				width: 100px;
				height: 10px;
				background-color: red;
				top: 145px;
				border-radius: 0 50% 50% 0;
			}
			
			.minute {
				width: 120px;
				height: 8px;
				background-color: blue;
				top: 146px;
				border-radius: 0 50% 50% 0;
			}
			
			.second {
				width: 140px;
				height: 6px;
				background-color: green;
				top: 147px;
				border-radius: 0 50% 50% 0;
			}
			
			.weekday {
				width: 80px;
				height: 20px;
				position: absolute;
				right: 20px;
				top: 140px;
			}
			
			.weekday span {
				margin: 3px;
				background-color: white;
			}
			
			.time {
				width: 66px;
				height: 20px;
				bottom: 25px;
				left: 117px;
				position: absolute;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<!-- 12点 -->
			<div class="mark twe"></div>
			<!-- 3点 -->
			<div class="mark thr"></div>
			<!-- 6点 -->
			<div class="mark six"></div>
			<!-- 9点 -->
			<div class="mark nine"></div>
			
			<div class="weekday">
				<span>5</span>
				<span>日</span>
			</div>
			
			<div class="time">
				23:23:23
			</div>
			
			<!-- 时针 -->
			<div class="pointer hour"></div> 
			<!-- 分针 -->
			<div class="pointer minute"></div>
			<!-- 秒针 -->
			<div class="pointer second"></div>
			
			<div class="center"></div>
		</div>
	</body>
	
	<script type="text/javascript">
		var pointers = document.getElementsByClassName("pointer");
		var weekday = document.getElementsByClassName("weekday")[0];
		var day_span = document.getElementsByTagName("span")[0];
		var week_span = document.getElementsByTagName("span")[1];
		var time = document.getElementsByClassName("time")[0];
		
		var clock = function() {
			var timeNow = new Date();
			var day = timeNow.getDate();	//当前是该月第几日
			var week = timeNow.getDay();	//当前是星期几 0~6
			var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			
			day_span.innerHTML = format(day);
			week_span.innerHTML = weeks[week];
			
			var h = timeNow.getHours();
			var m = timeNow.getMinutes();
			var s = timeNow.getSeconds();
			time.innerHTML = format(h) + ":" + format(m) + ":" + format(s);
			
			// 秒针旋转角度, 60s = 360°, 1s转6°
			var rot_s = 6 * s - 90;
			// 分针旋转角度, 60m = 360°, 1m转6°, 受秒针影响，60s转6°，1s转 6/60 度
			var rot_m = 6 * m + s * (1/10) - 90;
			// 时针旋转角度，12h = 360°，1h转30°，受分针影响，60m转30°，1m转 30/60 度
			var rot_h = 30 * h + m * (1/2) - 90;
			
			pointers[2].style.transform = "rotate(" + rot_s + "deg)";
			pointers[1].style.transform = "rotate(" + rot_m + "deg)";
			pointers[0].style.transform = "rotate(" + rot_h + "deg)";
		}
		
		clock();
		// 每一秒执行一次函数，实现实时
		setInterval(clock, 1000);
		
		function format(e) {
			return e > 9? e: "0" + e;
		}
	</script>
</html>