使用JS和CSS制作一个时钟

最新推荐文章于 2024-04-07 15:24:43 发布

canwestart

最新推荐文章于 2024-04-07 15:24:43 发布

阅读量202

点赞数

分类专栏：前端文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/canwestart/article/details/107585450

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个实时显示当前时间的数字时钟。通过CSS样式实现表盘和指针的设计，利用JavaScript获取当前时间并更新指针位置，实现秒、分、时针的动态旋转。

摘要由CSDN通过智能技术生成

一个圈加上外边框当表盘，三个矩形当指针，使用rotate去旋转指针。
用JS获取Date，然后每秒转动指针即可。补帧动画使用trasition。

<!DOCTYPE html>
<style>
	.clock{
		height: 200px;
		width: 200px;
		background-color: black;
		border-radius: 120px;
		border: solid;
		border-width: 20px;
		border-color: #0bbfd3;
		position: absolute;
		}
	.#hands{
		position: absolute;
				background-color: #000000;
	}	
	.line{

		border-radius: 8px;
		position: absolute;
		left: 90px;
		top:92px;
		transform:rotate(0deg);
	}
	.line#hour{
		background-color: #ff007f;
		height:16px ;
		width:75px;
		transform-origin: 10px 8px;
		transition: 1s;
	}
	.line#min{
		background-color: #ffff7f;
		width: 82px;
		height: 12px;
		left: 0px;
		top:2px;
		transform-origin: 10px 6px;
		transition: 1s;
	}
	.line#sec{
				background-color: #55aaff;
		width: 89px;
		height: 6px;
		left: 0px;
		transform-origin: 10px 3px;
		top:2px;
		transition: 1s;
	}
	.line#test {
		width: 89px;
		height: 20px;
		left: 0px;
		transform-origin: 10px 3px;
		transform:skew(45deg);
		top:2px;
	}
	#num12{
		color: white;
		width: 200px;
		position: absolute;
		text-align: center;
		top:-15px;
		left:-3px;
		font-weight: bold;
		font-style: italic;
		font-size: 26px;
	}
	#num3{
		color: white;
		width: 200px;
		position: absolute;
		text-align: center;
		top:84px;
		left:100px;
		font-weight: bold;
		font-style: italic;
		font-size: 26px;
	}
	#num6{
		color: white;
		width: 200px;
		position: absolute;
		text-align: center;
		bottom:-15px;
		left:-3px;
		font-weight: bold;
		font-style: italic;
		font-size: 26px;
	}
	#num9{
		color: white;
		width: 200px;
		position: absolute;
		text-align: center;
		top:84px;
		left:-105px;
		font-weight: bold;
		font-style: italic;
		font-size: 26px;
	}
	#plane{
		position: absolute;
		top :250px;
	}
</style>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div class="clock">
			<div id="hands">				
				<div class="line"id ="hour" >
					<div class="line"id ="min" >
						<div class="line"id ="sec" >
						</div>
					</div>
				</div>				
			</div>
			<div id="num12">
				12
			</div>
			<div id="num3">
				3
			</div>
			<div id="num6">
				6
			</div>
			<div id="num9">
				9
			</div>
		</div>
		<div id="plane">
<!-- 			<button οnclick="fh(30)">rotate h</button>
			<button οnclick="fm(6)">rotate m</button>
			<button οnclick="fs(6)">rotate s</button> -->
			<!-- <button οnclick="start()">start</button> -->
		</div>
		
	</body>
</html>
<script>
	var hour = 0;
	var sec = 0;
	var min = 0;
	
	function fh(deg){
		hour= hour+deg;
		min=min -deg;
		var obj = document.getElementById("hour");
		obj.style.cssText="transform:rotate("+hour+"deg);"
		var obj = document.getElementById("min");
		obj.style.cssText="transform:rotate("+min+"deg);"
	}
	function fm(deg){
		min=min +deg;
		sec = sec -deg;
		var obj = document.getElementById("min");
		obj.style.cssText="transform:rotate("+min+"deg);"
		var obj = document.getElementById("sec");
		obj.style.cssText="transform:rotate("+sec+"deg);"
	}
	function fs(deg){
		sec = sec +deg;
		var obj = document.getElementById("sec");
		obj.style.cssText="transform:rotate("+sec+"deg);"
	}
	var date = new Date();
	var h= date.getHours();
	var m=date.getMinutes();
	var s= date.getSeconds();
	console.log(h,m,s)
	h = h %12;
	fh(270+h*30);
	fm(270+m*6);
	fs(270+s*6);
	setInterval(function(){ fs(6) }, 1000);
	setInterval(function(){ fm(6) }, 60000);
	setInterval(function(){ fs(6) }, 3600000);
</script>