JS实现仿IOS时钟

JS实现仿IOS时钟

最近都在练习一些小Demo，来提高对JS的掌握度，当然这其中也顺便温习了HTML和CSS，今天又花了一些时间仿写了一个IOS时钟，虽然还是在网上找的教程，但还是实现了练手的效果，每天进步一点点吧。

成果图

我这里因为不是放的动图，所以时钟并没有转动，实际效果中是可以获取本地时间并且转动的。

HTML以及CSS部分

首先我们需要想好思路，先做什么，首要任务是将表盘做出来

这里的表盘不是用的背景图片，而是用的两个div做出来的，我们先来写一下代码:

<div class="clock">
	<ul class="clock-container">
		<li class="num">1</li>
        <li class="num">2</li>
        <li class="num">3</li>
        <li class="num">4</li>
        <li class="num">5</li>
		<li class="num">6</li>
        <li class="num">7</li>
        <li class="num">8</li>
		<li class="num">9</li>
        <li class="num">10</li>
        <li class="num">11</li>
		<li class="num">12</li>
	</ul>
</div>

在这里，我们用一个div包裹住一个ul，ul里面是数字，外面的clock是黑色的，里面的clock-container是白色的圆盘。然后我们通过CSS来修饰一下：

body,
ul {
   
	padding: 0;
	margin: 0;
}
li {
   
	list-style: none;
}
.clock{