画一个时钟

最新推荐文章于 2024-08-30 17:03:57 发布

linzi999

最新推荐文章于 2024-08-30 17:03:57 发布

阅读量25

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/linzi999/article/details/133872646

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.boss {
				width: 300px;
				height: 300px;
				border: 5px solid #000;
				border-radius: 50%;
				margin: 0 auto;
				transform: translateY(50%);
			}
			ul,li {
				list-style: none;
			}
			.uls {
				width: 280px;
				height: 280px;
				margin: 10px;
				position: relative;
				
			}
			ul li {
				width: 20px;
				height: 280px;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -10px;
				transform-origin: center;
				text-align: center;
			}
			.h {
				width: 10px;
				height: 60px;
				background-color: #000000;
				position: absolute;
				top: 80px;
				left: 50%;
				margin-left: -5px;
				transform-origin: 50% 100%;
			}
			.m {
				width: 6px;
				height: 80px;
				background-color: blue;
				position: absolute;
				top: 60px;
				left: 50%;
				margin-left: -3px;
				transform-origin: 50% 100%;
			}
			.s {
				width: 4px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 40px;
				left: 50%;
				margin-left: -2px;
				transform-origin: 50% 100%;
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<ul class="uls"></ul>
			<div class="h"></div>
			<div class="m"></div>
			<div class="s"></div>
		</div>
	</body>
	<script type="text/javascript">
		var uls = document.getElementsByClassName("uls")[0];
		for(let i=1;i<=12;i++){
			let lis = document.createElement("li");
			lis.style.transform = `rotate(${i*30}deg)`;
			let spans = document.createElement("span");
			spans.style.display = "inline-block";
			spans.style.transform = `rotate(${i*-30}deg)`;
			spans.innerHTML = i;
			lis.appendChild(spans);
			uls.appendChild(lis);
		}
		var ss = document.getElementsByClassName("s")[0];
		var mm = document.getElementsByClassName("m")[0];
		var hh = document.getElementsByClassName("h")[0];
		setInterval(()=>{
			var time = new Date();
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();
			ss.style.transform = `rotate(${s*6}deg)`;
			mm.style.transform = `rotate(${m*6+s*6/60}deg)`;
			hh.style.transform = `rotate(${h*30+m*30/60+s*30/60/60}deg)`;
		},1000)
	</script>
</html>