SOURCE

window.onload = function(){
				// 下面两个循环为设置每个数字的旋转角度并将其摆正
				const li_list = document.getElementsByClassName('num');
				for(let i=0;i<li_list.length;i++){
					li_list[i].style.transform = "rotate("+(i+1)*30 + "deg"+")";
				}
				const span_list = document.getElementsByTagName('span');
				for(let i=0;i<span_list.length;i++){
					span_list[i].style.transform = "rotate(-"+(i+1)*30 + "deg"+")";
				}
				//调用更新指针的函数
				update_pointer();
				
				//获取当前时间并让时钟的指针每隔一段时间旋转对应的角度
				function update_pointer(){
					var date = new Date();
					var hour = date.getHours();
					var min = date.getMinutes();
					// sec为精确到毫秒的秒数,如52.753
					var sec = date.getSeconds() + date.getMilliseconds()/1000;
					var hour_pointer = document.getElementById("hour");
					var min_pointer = document.getElementById("min");
					var sec_pointer = document.getElementById("sec");
					sec_pointer.style.transform = "translate(-50%,20px) rotate("+(sec)*6 + "deg"+")";
					min_pointer.style.transform = "translateX(-50%) rotate("+(min+sec/60)*6 + "deg"+")";
					hour_pointer.style.transform = "translateX(-50%) rotate("+(hour-12)*30 + "deg"+")";
					console.log("当前时间",date);
					// 设置1000/60毫秒后执行操作,此处是一个递归，也可以使用setInterval()
					setTimeout(update_pointer,1000/60);
				}			
			}

<div class="clock">
			<ul class="dial">
				<li class="num"><span>1</span></li>
				<li class="num"><span>2</span></li>
				<li class="num"><span>3</span></li>
				<li class="num"><span>4</span></li>
				<li class="num"><span>5</span></li>
				<li class="num"><span>6</span></li>
				<li class="num"><span>7</span></li>
				<li class="num"><span>8</span></li>
				<li class="num"><span>9</span></li>
				<li class="num"><span>10</span></li>
				<li class="num"><span>11</span></li>
				<li class="num"><span>12</span></li>
				<div id="point"></div>
				<div id="hour"></div>
				<div id="min"></div>
				<div id="sec"></div>
			</ul>
</div>

		/* 初始化样式 */
			html,body,ul{
				margin: 0;
				padding: 0;
			}
			/*	position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);  
				该样式用于设置水平垂直居中
			*/
			.clock{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 252px;
				height: 252px;
				background-color: pink;
				border-radius: 50px;
			}
			.dial{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 220px;
				height: 220px;
				border-radius: 50%;
				background-color: #fff;
			}
			.clock .num{
				list-style: none;
				width: 26px;
				position: absolute;
				left: 50%;
				margin-left: -13px;
				font-weight: 800;
				text-align: center;
				transform-origin: 13px 110px;
			}
			/* 这里必须加inline-block或block
			 * 因为transform不适用于inline元素.
			 */
			.num span{
				display: inline-block;
                color: #666;
			}
			#point{
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: pink;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			#hour{
				width: 4px;
				height: 70px;
				background: pink;
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translate(-50%,0) rotate(10deg);
				transform-origin: 2px 70px;
				border-radius: 2px;
			}
			#min{
				width: 4px;
				height: 80px;
				background: pink;
				position: absolute;
				top: 30px;
				left: 50%;
				transform-origin: 2px 80px;
				border-radius: 2px;
			}
			#sec{
				width: 2px;
				height: 120px;
				background: #FF8900;
				position: absolute;
				top: -10px;
				left: 50%;
				transform-origin: 1px 100px;
				border-radius: 1px;
			}