CSS学习之路: 如何通过获取样式表对象来制作真实时间的时钟？

@德玛玩前端

已于 2024-01-04 11:30:52 修改

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css css3 html

于 2023-04-07 15:19:02 首次发布

本文链接：https://blog.youkuaiyun.com/Code_King006/article/details/130009793

css3 专栏收录该内容

5 篇文章

订阅专栏

该代码示例展示了如何利用HTML和CSS构建一个静态的圆形时钟，并通过JavaScript动态更新时钟的秒、分和时针的角度，使其与当前系统时间同步。通过访问文档的样式表对象和修改@keyframes规则，实现了指针旋转的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景

使用html和css制作一个时钟，想要将当前真实的时间赋值给时钟，所以需要通过样式表对象，修改@keyframes定义动画中的transform的rotate()函数。
动态时钟
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>clock</title>
		<style type="text/css">
			.clock{
				width:400px;
				height:400px;
				border:1px solid #555;
				border-radius:50%;
				position:relative;

			}
			.num{
				width:32px;
				text-align:center;
				line-height:25px;
				position:absolute;
				top:0;
				left:184px;
				transform-origin: 50% 200px;
			}
			 .num:nth-child(1){
			      transform:rotate(30deg)
			    }
			    .num:nth-child(2){
			      transform:rotate(60deg)
			    }
			    .num:nth-child(3){
			      transform:rotate(90deg)
			    }
			    .num:nth-child(4){
			      transform:rotate(120deg)
			    }
			    .num:nth-child(5){
			      transform:rotate(150deg)
			    }
			    .num:nth-child(6){
			      transform:rotate(180deg)
			    }
			    .num:nth-child(7){
			      transform:rotate(210deg)
			    }
			    .num:nth-child(8){
			      transform:rotate(240deg)
			    }
			    .num:nth-child(9){
			      transform:rotate(270deg)
			    }
			    .num:nth-child(10){
			      transform:rotate(300deg)
			    }
			    .num:nth-child(11){
			      transform:rotate(330deg)
			    }
			    .num:nth-child(12){
			      transform:rotate(360deg)
			    }
			    .s{
					width:2px;
					height:180px;
					position:absolute;
					top:20px;
					left:199px;
					background-color:#555;
					transform-origin:50% 180px ;
					animation: s_rotate 60s linear infinite;
				}
				.m{
					width:4px;
					height:150px;
					position:absolute;
					top:50px;
					left:198px;
					background-color:#555;
					transform-origin:50% 150px;
					animation: m_rotate 3600s linear infinite;
				}
				.h{
				  width:4px;
				  height:150px;
				  position:absolute;
				  top:50px; left:198px;
				  background-color:#555;
				  transform-origin: 50% 150px;
				  animation: h_rotate 3600s linear infinite;
				}
				@keyframes s_rotate{
				  0%{
					transform:rotate(0deg);
				  }
				  100%{
					transform:rotate(360deg);
				  }
				}
				@keyframes m_rotate{
				  0%{
					transform:rotate(0deg);
				  }
				  100%{
					transform:rotate(360deg);
				  }
				}
				@keyframes h_rotate{
				  0%{
					transform:rotate(0deg);
				  }
				  100%{
					transform:rotate(360deg);
				  }
				}
		</style>
		
	</head>
	<body>
		<div class="clock">
		  <div class="num">I</div>
		  <div class="num">II</div>
		  <div class="num">III</div>
		  <div class="num">IIII</div>
		  <div class="num">V</div>
		  <div class="num">VI</div>
		  <div class="num">VII</div>
		  <div class="num">VIII</div>
		  <div class="num">IX</div>
		  <div class="num">X</div>
		  <div class="num">XI</div>
		  <div class="num">XII</div>
		  <div class="s"></div>
		  <div class="m"></div>
		  <div class="h"></div>
		</div>
		</body>
</html>

<script type="text/javascript">
	 //根据当前系统时间计算每个指针得角度
	 var now=new Date()
	 var s=now.getSeconds()
	 var sdeg=s/60*360
	 var m=now.getMinutes()
	 var mdeg=m/60*360
	 var h=now.getHours()
	 h>=12&&(h-=12)
	 var hdeg=(h*60+m)*360/60*12
	 
	 //获取样式表对象
	 var sheet=document.styleSheets[0]
	 console.log(sheet.cssRules)
	 
	 //秒针
	 //获取想修改的cssRule对象
	 var cssRule=sheet.cssRules[17]
	 console.log(document.styleSheets[0].cssRules[17].cssRules[0].style.transform)
	 var rule0=cssRule.cssRules[0]
	 //修改rule0的style中的transform为新角度
	 rule0.style.transform=`rotate(${sdeg}deg)`
	 var rule100=cssRule.cssRules[1]
	 rule100.style.transform=`rotate(${sdeg+360}deg)`
	 
	 //分针
	 //获取想修改的cssRule对象
	 var cssRule=sheet.cssRules[18]
	 console.log(cssRule)
	 //获取其中的子规则
	 var rule0=cssRule.cssRules[0]
	 //修改rule0的style中的transform为新角度
	 rule0.style.transform=`rotate(${mdeg}deg)`
	 var rule100=cssRule.cssRules[1]
	 rule100.style.transform=`rotate(${mdeg+360}deg)`
	 
	 //时针
	 //获取想修改的cssRule对象
	 var cssRule=sheet.cssRules[19]
	 console.log(cssRule);
	 //获取其中的子规则
	 var rule0=cssRule.cssRules[0]
	 //修改rule0的style中的transform为新角度
	 rule0.style.transform=`rotate(${hdeg}deg)`
	 var rule100=cssRule.cssRules[1]
	 rule100.style.transform=`rotate(${hdeg+360}deg)`
</script>

剖析代码

    <script type="text/javascript">
           var sheet=document.styleSheets
		    console.log(sheet) 
    </script>

在这里插入图片描述

    <script type="text/javascript">
           var sheet=document.styleSheets[0]
		    console.log(sheet) 
    </script>

在这里插入图片描述

    <script type="text/javascript">
           var sheet=document.styleSheets[0]
		    console.log(sheet.cssRules) 
    </script>

在这里插入图片描述

   
    <script type="text/javascript">
           //获取想修改的cssRule对象
           var sheet=document.styleSheets[0]
		   console.log(sheet.cssRules[17]) 
		   console.log(sheet.cssRules[18]) 
		    console.log(sheet.cssRules[19]) 
    </script>

在这里插入图片描述

   
    <script type="text/javascript">
           //获取想修改的cssRule对象
           var sheet=document.styleSheets[0]
		   console.log(sheet.cssRules[17].cssRules)   
    </script>

在这里插入图片描述

   
    <script type="text/javascript">
           //获取想修改的cssRule对象
           var sheet=document.styleSheets[0]
		   console.log(sheet.cssRules[17].cssRules[0])   
		   console.log(sheet.cssRules[17].cssRules[1]) 
    </script>

在这里插入图片描述

   
    <script type="text/javascript">
           //获取想修改的cssRule对象
           var sheet=document.styleSheets[0]
		   console.log(sheet.cssRules[17].cssRules[0].style)   
		   console.log(sheet.cssRules[17].cssRules[1].style) 
    </script>

在这里插入图片描述

    <script type="text/javascript">
          //修改的cssRule对象
           var sheet=document.styleSheets[0]
           sheet.cssRules[17].cssRules[0].style="xxxx"
           sheet.cssRules[17].cssRules[1].style="xxxx"
    </script>