JS实现时钟_js 时钟的逻辑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39125684/article/details/82254136

本文介绍了使用JS和CSS实现动态时钟界面的过程。先搭建大体测试界面，运用CSS选择器和旋转属性设置样式，再用JS代码生成刻度并添加样式，最后让指针动起来。还总结了用到的选择器、渐变和时间函数等知识点。

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

先看一下最终的效果：http://www.gongx.top/xian/time.html

不会做动图，就放到我个人网站上去了，大家可以去看一下。

本来不想记录这个，但是老师的一个操作让我突然生出一个念头：

我靠，还能这么操作？

话不多说，开始分析一下。

结构如下：

	 <!--最外层的div -->
	<div id="wrap">
		
		 <!--放置刻度 -->
		<ul></ul>
		 
		 <!--时针、分针、秒针 -->
		<div id="hour"></div>
		<div id="min"></div>
		<div id="sec"></div>
		
		 <!--指针下面的大黑点 -->
		<div id="ico"></div>
	</div>

1、写出最外层wrap的样式来

#wrap{
			width: 400px;
			height: 400px;
			border: 10px solid #999;
			border-radius: 50%;
			margin: 100px auto;
			
			 /*因为里面的元素和定会用到定位，而且是根据这个div定位，所以价格定位属性 */
			position: relative;
		}

2、将一个大体的测试界面搭建起来看一下

知识点一：:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

知识点二：-webkit-transform-origin:设置旋转的基点

知识点三：-webkit-transform:rotate(度数);设置围绕基点旋转的度数

当然，我们不能用css一个刻度一个刻度的设置，现在写出来看一下，一会用Js代码生成。

ul{
			list-style:none;
			margin: 0;
			padding: 0;
			height: 400px;
		}
		#wrap ul li{
			width: 3px ;
			height: 6px;
			border-radius: 10px;
			background-color:#666 ;
			position: absolute;
			left: 199px;
			top: 0;
			
			/*设置刻度以表盘的中心为基点进行旋转*/
			-webkit-transform-origin:center 200px; /*左右 上下*/
		}
		 /*现针对每个刻度旋转看一下效果 */
		#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
		#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
		#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
		#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
		#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
		#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
		#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
		#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}
		#wrap ul li:nth-of-type(5n+1){height:12px;}

3、先把刻度注释掉，一会用Js生成，现在将指针的样式写出来，

#hour{
		width: 6px;
		height: 75px;
		background-color: #000;
		position: absolute;
		left: 197px;
		top: 125px;
	}
	#min{
		width: 4px;
		height: 105px;
		background-color: #999;
		position: absolute;
		left: 198px;
		top: 95px;
	}
	#sec{
		width: 2px;
		height: 125px;
		background-color: red;
		position: absolute;
		left: 197px;
		top: 75px;
	}
	#ico{
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-color: #666;
		position: absolute;
		top: 193px;
		left: 193px;
	}

4、因为指针旋转是按照底部中心旋转，所以把三个指针的旋转基点移动到底部中间

#hour,#min,#sec{
		-webkit-transform-origin: bottom; 
	}

5、现在通过js代码，把刻度加进来---通过ul.innerHTML循环添.加<li></li>

            //[1]找到ul
			var oUl =  document.getElementsByTagName('ul')[0];
			
			//[2]定义一个变量保存循环生成的<li></li>
			var strLi = '';
			
			//[3]循环生成<li></li>并添加到strLi中
			for(var i=0;i<60;i++){
				strLi +='<li></li>';
			}
			
			//[4]将strLi添加到ul中
			oUl.innerHTML = strLi;

6、现在给刚刚添加的<li></li>添加样式-----------旋转

这里就是老师让我眼前一亮的地方，直接拿到<style></style>标签，然后往里边插入数据

我是不是太没见识了一点。。。。哈哈哈

这里有一点需要注意，oStyle.innerHTML += strCss;

是加等，不是单纯的赋值，如果像之前<ul></ul>中没数据可以直接赋值，这里就需要 += 了

//[*1]找到<style>标签
			var oStyle = document.getElementById('style');
			
			//[*2]定义一个变量保存样式字符串
			var strCss = '';
			
			//[*3]在刚刚生成<li></li>的循环中添加样式代码
			//[3]循环生成<li></li>并添加到strLi中
			for(var i=0;i<60;i++){
				strCss +="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+(i*6)+"deg);}";
				console.log(i*6);
				strLi +='<li></li>';
			}
			
			//[*4]将strCss添加到<style></style>标签中
			oStyle.innerHTML += strCss;

7、现在界面已经搭建完成了，下面就是需要让指针动起来了。

//(a)先找到这些指针
			var oHour = document.getElementById('hour');
			var oMin = document.getElementById('min');
			var oSec = document.getElementById('sec');
			
			//(b)写一个函数让指针动起来
			function toTime(){
				//(b-1)拿到时间对象
				var oDate = new Date();
				//(b-2)拿到此时的时间
				var iSec = oDate.getSeconds();
				var iMin = oDate.getMinutes()+iSec/60;
				var iHour = oDate.getHours()+iMin/60;
				
				//(b-3)根据此时的时间给指针赋值
				oSec.style.webkitTransform = 'rotate('+(iSec*6)+'deg)';
				oMin.style.webkitTransform = 'rotate('+(iMin*6)+'deg)';
				oHour.style.webkitTransform = 'rotate('+(iHour*30)+'deg)';
			}
			
			//(c)添加定时器,动起来
			setInterval(toTime,1000);