基于js和css做的一个动态钟表

熬夜小宝贝
已于 2023-08-30 10:20:02 修改
阅读量144
点赞数
CC 4.0 BY-SA版权
文章标签： css html html5
于 2021-09-23 19:11:56 首次发布
本文链接：https://blog.youkuaiyun.com/CycleByle/article/details/120441337
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		html,body {
			height: 100%;
		}
		body {
			display: grid;
			place-items: center;
			background: #DDE1E7;
			text-align: center;
		} 
		
		.clock {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #dde1e7;
			height: 250px;
			width: 250px;
			border-radius: 50%;
			box-shadow: -3px -3px 7px #ffffff73,
						3px 3px 5px rgba(94,104,121,0.288);
		}
		.clock:before {
			position: absolute;
			content: '';
			height: 220px;	
			width: 220px;
			background-color: #DDE1E7;
			border-radius: 50%;
			box-shadow: inset -3px -3px 7px #ffffff73,
						inset  3px 3px 5px rgba(94,104,121,0.288);
			
		}
		
		.clock:after {
			position: absolute;
			content: '';
			height: 120px;	
			width: 120px;
			background-color: #DDE1E7;
			border-radius: 50%;
			box-shadow: inset -1px -1px 5px #ffffff73,
						inset  1px 1px 3px rgba(94,104,121,0.288);
		}
		
		.clock .center-nut {
			height: 15px;
			width: 15px;
			background-color: #404040;
			border-radius: 50px;
			z-index: 2;
			position: absolute;
		}
		.clock .center-nut2 {
			height: 9px;
			width: 9px;
			background-color: #3498db;
			border-radius: 50px;
			z-index: 15;
			position: absolute;
		}
		
		.indicators div {
			position: absolute;
			width: 2px;
			height: 5px;
			background-color: #404040;
		}
		
		.indicators div:nth-child(1) {
			/* background-color: #3498db; */
			transform: rotate(30deg) translateY(-100px);
		}
		.indicators div:nth-child(2) {
			/* background-color: #3498db; */
			transform: rotate(60deg) translateY(-100px);
		}
		.indicators div:nth-child(3) {
			background-color: #3498db;
			transform: rotate(90deg) translateY(-100px);
		}
		.indicators div:nth-child(4) {
			/* background-color: #3498db; */
			transform: rotate(120deg) translateY(-100px);
		}
		.indicators div:nth-child(5) {
			/* background-color: #3498db; */
			transform: rotate(150deg) translateY(-100px);
		}
		.indicators div:nth-child(6) {
			background-color: #3498db;
			transform: rotate(180deg) translateY(-100px);
		}
		.indicators div:nth-child(7) {
			/* background-color: #3498db; */
			transform: rotate(210deg) translateY(-100px);
		}
		.indicators div:nth-child(8) {
			/* background-color: #3498db; */
			transform: rotate(240deg) translateY(-100px);
		}
		.indicators div:nth-child(9) {
			background-color: #3498db;
			transform: rotate(270deg) translateY(-100px);
		}
		.indicators div:nth-child(10) {
			/* background-color: #3498db; */
			transform: rotate(300deg) translateY(-100px);
		}
		.indicators div:nth-child(11) {
			/* background-color: #3498db; */
			transform: rotate(330deg) translateY(-100px);
		}
		.indicators div:nth-child(12) {
			background-color: #3498db;
			transform: rotate(360deg) translateY(-100px);
		}
		
		.sec-hand,.min-hand,.hr-hand {
			position: absolute;
		}
		.sec-hand,.sec {
			height: 180px;
			width: 180px;
			z-index: 6;
		}
		.min-hand,.min {
			height: 140px;
			width: 140px;
			z-index: 5;
		}
		.hr-hand,.hr {
			height: 110px;
			width: 110px;
			z-index: 4;
		}
		.sec,.min,.hr {
			display: flex;
			justify-content: center;
			position: absolute;
		}
		.sec:before {
			position: absolute;
			content: '';
			height: 110px;
			width: 3px;
			background: #3498DB;
		}
		.sec:after {
			position: absolute;
			content: '';
			height: 35px;
			width: 7px;
			background: #3498DB;
			top: 105px;
			border-radius: 5px;
		}
		
		.min:before {
			position: absolute;
			content: '';
			/* height: 110px; */
			width: 1px;
			top: -15px;
			/* background: #3498DB; */
			border-left: 3px solid transparent;
			border-right: 3px solid transparent;
			border-bottom: 60px solid #e95949;
		}
		.min:after {
			position: absolute;
			content: '';
			width: 3px;
			top: 40px;
			/* background: #3498DB; */
			border-left: 2px solid transparent;
			border-right: 2px solid transparent;
			border-bottom: 30px solid #e95949;
		}
		
		
		.hr:before {
			position: absolute;
			content: '';
			width: 1px;
			border-left: 3px solid transparent;
			border-right: 3px solid transparent;
			border-bottom: 35px solid #303030;
		}
		.hr:after {
			position: absolute;
			content: '';
			width: 3px;
			top: 35px;
			border-left: 2px solid transparent;
			border-right: 2px solid transparent;
			border-bottom: 25px solid  #303030;
		}
		
	</style>
</head>
<body>
	<div class="clock">
		<div class="center-nut"></div>
		<div class="center-nut2"></div>
		<div class="indicators">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="sec-hand">
			<div class="sec"></div>
		</div>
		<div class="min-hand">
			<div class="min"></div>
		</div>
		<div class="hr-hand">
			<div class="hr"></div>
		</div>
	</div>
	
	<script>
		var sec = document.querySelector(".sec");
		var min = document.querySelector(".min");
		var hr = document.querySelector(".hr");
		setInterval(function(){
			let time = new Date();
			let secs = time.getSeconds() * 6;
			let mins = time.getMinutes() * 6;
			let hrs = time.getHours() * 30;
			hrs=hrs+mins/12;
			sec.style.transform = "rotateZ("+secs+"deg)";
			min.style.transform = "rotateZ("+mins+"deg)";
			hr.style.transform = "rotateZ("+hrs+"deg)";
		});
	</script>
</body>
</html>