模拟时钟

最新推荐文章于 2021-06-12 20:36:04 发布

小森呀

最新推荐文章于 2021-06-12 20:36:04 发布

阅读量2.4k

点赞数

分类专栏：小案例文章标签：模拟时钟

本文链接：https://blog.csdn.net/KEY2018/article/details/93514745

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟时钟</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				width: 1000px;
				height: 1000px;
				background-color: lightblue;
				border-radius: 500px;
				margin: 50px auto;
				position: relative;
			}
			p{
				width: 100px;
				height: 500px;
				/*background-color: lightcoral;*/
				text-align: center;
				font-size: 80px;
				position: absolute;
				left: 450px;
				transform-origin: bottom center;
			}
			.bg .hours{
				width: 10px;
				height: 250px;
				background-color: red;
				position: absolute;
				left: 495px;
				top: 250px;
				transform-origin: bottom center;
			}
			.bg .minutes{
				width: 6px;
				height: 350px;
				background-color: green;
				position: absolute;
				left: 497px;
				top: 150px;
				transform-origin: bottom center;
			}
			.bg .seconds{
				width: 2px;
				height: 400px;
				background-color: yellow;
				position: absolute;
				left: 499px;
				top: 100px;
				transform-origin: bottom center;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="hours"></div>
			<div class="minutes"></div>
			<div class="seconds"></div>
		</div>
	</body>
	<script type="text/javascript">
		var bg=document.querySelector('.bg');
		var hours=document.querySelector('.hours');
		var minutes=document.querySelector('.minutes');
		var seconds=document.querySelector('.seconds');
		for(var x=1;x<=12;x++)
		{
			var p=document.createElement('p');
		    p.innerHTML=x;
		    bg.appendChild(p);
		    p.style.transform='rotate('+30*x+'deg)';
		}
		    our();
		    setInterval(our,1000)
		    function our()
		    {
				var date=new Date();
				var S=6*date.getSeconds();
				var M=6*date.getMinutes();
				var H=30*date.getHours()+M/12;
				hours.style.transform='rotate('+H+'deg)';
				minutes.style.transform='rotate('+M+'deg)';
				seconds.style.transform='rotate('+S+'deg)';
		    } 
	</script>
</html>