JS基础之将当前时间显示在表盘上,并且表盘会同步当前时间

最新推荐文章于 2023-06-11 00:04:30 发布

七上八下的爆米花

最新推荐文章于 2023-06-11 00:04:30 发布

阅读量1.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lanseguhui/article/details/81092021

版权

JavaScript 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#clock{
			width: 300px;
			height: 300px;
			border:5px solid pink;
			position: relative;
			border-radius: 50%;
			box-shadow: 0 0 50px #DAD475 inset;
		}
		#clock>div{
			width: 20px;
			height: 20px;
			/*background-color: cyan;*/
			/*border-radius: 50%;*/
			position: absolute;
			left:calc(50% - 10px);
			top:0;
			z-index: 10;
			/*将每一个时刻的变换参照点设置为表盘中心*/
			transform-origin: 10px 150px;
			text-align: center;
		}
		#clock>div>div{
			transform-origin: 10px 10px;
		}
		.h{
			display: block;
			width: 6px;
			height: 80px;
			background-color: #95DA3B;
			position: absolute;
			left:calc(50% - 3px);
			top:86px;
			z-index: 1000;
			transform-origin:50% 80%; 
			border-radius:50%;
		}
		.m{
			display: block;
			width: 4px;
			height: 120px;
			background-color: #DA88BA;
			position: absolute;
			left:calc(50% - 2px);
			top:54px;
			z-index: 100;
			transform-origin:50% 80%; 
			border-radius:50%;
		}
		.s{
			display: block;
			width: 4px;
			height: 140px;
			background-color:#DA935C;
			position: absolute;
			left:calc(50% - 2px);
			top:38px;
			z-index: 10;
			transform-origin:50% 80%; 
			border-radius:50%;

		}
		img{
			width: 180px;
			height: 180px;
			display: block;
			position: absolute;
			left:62px;
			top:38px;
			z-index: 5;
		}
		.spike{
			display: block;
			width: 10px;
			height: 10px;
			background-color: #4C78DA;
			border-radius: 50%;
			position: absolute;
			left:145px;
			top:145px;
			z-index: 5000;
		}

	</style>
</head>
<body>
	<div id="clock">
		<div><div>12</div></div>
		<div><div>1</div></div>
		<div><div>2</div></div>
		<div><div>3</div></div>
		<div><div>4</div></div>
		<div><div>5</div></div>
		<div><div>6</div></div>
		<div><div>7</div></div>
		<div><div>8</div></div>
		<div><div>9</div></div>	
		<div><div>10</div></div>	
		<div><div>11</div></div>
		
		<!-- 表的指针 -->
		<span class="h"></span>
		<span class="m"></span>
		<span class="s" ></span>
		<span class="spike"></span>

		<img src="./img/8.jpg" alt="">

	</div>

</body>
<script>
	var ds = document.querySelectorAll("#clock>div");
	for(var i=0;i<ds.length;i++){
		//12个刻度共360deg,那么一个刻度就需要需要30deg
		ds[i].style.transform="rotate("+30*i+"deg)";
	}
   var ds1 = document.querySelectorAll("#clock>div>div");
	for(var i=0;i<ds1.length;i++){
		//父级元素发生旋转,子级元素也会随之发生旋转,所以刻度显示的数字会发生角度倾斜,需要将每一个div中的span逆时针旋转相同的角度
		//把数字摆正
		ds1[i].style.transform="rotate("+(-30*i)+"deg)";
	}
	inniTime();
	//初始哈时间的函数,在函数中获取当前时间的转换角度并显示在表盘上
   setInterval(inniTime,1000);
   function inniTime(){
   	//获取时间并且将时间转换为对应的角度
   		var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    // console.log(minutes);
    var seconds = date.getSeconds();
    // console.log(seconds);
    var s = document.querySelector(".s");
   	var m = document.querySelector(".m");
   	var h = document.querySelector(".h");
   	//因为得到的是24小时的时间,钟表上只有12个小时,所以对时间需要换算
    // hours = hours>12?hours-12:hours;
    if(hours>12){
    	hours = hours-12;
    }
   // console.log(hours);
      //将秒钟转换为角度
   	  s.style.transform="rotate("+seconds*6+"deg)";
   	  //将分钟转换为角度,分钟的角度由两部分组成,一部分是自己获取的分钟影响自己旋转的角度,一部分是秒钟影响自己所旋转的角度
   	  m.style.transform="rotate("+(minutes*6+seconds *6/60)+"deg)";
   	  //将小时转换为角度.小时的角度由两部分组成,一部分是自己获取的小时影响自己旋转的角度,一部分是分钟影响自己做旋转的角度
   	  h.style.transform="rotate("+(hours*30+(minutes*30)/60)+"deg)";
   	}
   	

</script>
</html>

七上八下的爆米花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础之将当前时间显示在表盘上,并且表盘会同步当前时间

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #clock{ width: 300px; height:
复制链接

扫一扫

专栏目录