我正在参加码上掘金体验活动，详情：show出你的创意代码块

前言

这次打算给大家介绍一下如何制作一个简单的刻度时钟，依旧是利用网页三剑客进行编码，不过这个偏JS较多，不过也很简单，接下来请看代码吧。

代码

正文

1、布局

首先我们先要知道我们要做的是什么，包含有哪些部分，然后再一个一个，一层层的布局出来。时钟包括一个外壳、时针、秒针、刻度、数字等组成，那我们就要先这个这些给画出来，先进行html布局，部分代码如下：

<div class="clockBox">
  <img class="bg-img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp16.qhimg.com%2Ft012fe61ae4c7e783b6.jpg&refer=http%3A%2F%2Fp16.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652921552&t=6a1df7de5c87162200c6d86de610837a" />
	<div class="clock" id="clock">
		<div class="hour" id="hour"></div>
		<div class="min"id="min"></div>
		<div class="sec"id="sec"></div>
	</div>
</div>

以上代码分别定义了时钟的各个部分的容器，img是我想给时钟一个背景，这个是lol里的瑞文，很喜欢的一个英雄。

2、进行样式调整

把html都做出来之后，就可以一个一个的用css进行位置调整，部分代码如下：

.clockBox{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.bg-img{
  width: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0.8;
}
.clock{
	width: 300px;
	height: 300px;
	border:1px solid black;
	border-radius: 50%;
	position: absolute;
	box-shadow: 0px 0px 20px black;
  background-size: 100%;
  z-index: 10;
}

.kedu{
	width: 3px;
	height: 5px;
	background-color: #F12D1C;
	position: absolute;
	left: 145px;
	transform-origin:5px 150px;
}
.kedu2{
	width: 5px;
	height: 15px;
	background-color: #8F2118;
	position: absolute;
	left: 145px;
	transform-origin:5px 150px;
}
.num{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 135px;
	top:10px;
	color: #E74133;
	font-size: 23px;
	font-weight: bold;
	font-family: "微软雅黑";
	transform-origin:15px 140px;
}
.numDiv{
	width: 50px;
	height: 50px;
	position: absolute;
	transform-origin:10px 18px;
}
.hour{
	width: 5px;
	height: 110px;
	background-color: black;
	position: absolute;
	left: 145px;
	top:50px;
	transform-origin:2.5px 100px;
}
.min{
	width: 3px;
	height: 130px;
	background-color: black;
	position: absolute;
	left: 145px;
	top:30px;
	transform-origin:2.5px 120px;
}
.sec{
	width: 1px;
	height: 150px;
	background-color: red;
	position: absolute;
	left: 145px;
	top:10px;
	transform-origin:2.5px 140px;
}

效果如下图:

把时钟的壳和时针分支的样式和位置调好，后来我发现刻度有很多个，如果一个一个进行调整会非常的麻烦，所以我使用js进行动态加入渲染，非常的银杏。代码如下：

var html = '<div class="kedu"></div>';
	for(var i = 0; i<60; i++){
		var $html = $(html);
		$html.css("-webkit-transform","rotate("+i*6+"deg)");
		$("#clock").append($html);
		if(!(i%5)){
			$html.addClass("kedu2");
		}
	}

得到时钟的所有刻度, 如图:

然后数字同理，不过只加12个，代码如下：

for(var i = 1; i<13; i++){
		var htmlNum = '<div class="num"></div>';
		var $htmlNum = $(htmlNum);
		var htmlDiv = '<div class="numDiv">'+i+'</div>';
		var $htmlDiv = $(htmlDiv);
		$htmlDiv.css("transform","rotate("+ (-i*30)+"deg)");
		$htmlNum.append($htmlDiv);
		$htmlNum.css("transform","rotate("+ i*30+"deg)")
		$("#clock").append($htmlNum);
	}

3、动起来

接下来就是让时针动起来了，原理就是让时针、分针以及秒针绕着时针中心旋转，秒针每秒钟动一小格，这个小格就是360度除以60（一圈有60秒），然后分针和时针依次类推，60进制动一下下一级的针，部分代码如下：

function clockRun(){
		var date =new Date();
		var hour = date.getHours();
		var min = date.getMinutes();
		var sec = date.getSeconds();
		$("#hour").css("transform","rotate("+ (hour*30 + min/2)+"deg)");
		$("#min").css("transform","rotate("+ (min*6)+"deg)");
		$("#sec").css("transform","rotate("+ (sec*6)+"deg)");
	}
	clockRun();
	setInterval(clockRun, 1000);

我们定义一个方法得到各个针的角度，使用定时器给它每秒钟执行一次，这样我们就得到一个会动的时钟，最终效果如下：

结语

本文描述了如何制作一个简单的时钟，做法也非常的简单，最主要的是通过css 的transform属性，进行时钟各个针的旋转，达到动起来的目的。