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

Myth丶恋晨 2021-09-15 18:38 384阅读 0赞

![70][]

<!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>

[70]: /images/20210813/186ddd0f746f4150b46b4c2b694fac47.png