小白都能看懂的html+js动态时钟效果

不同于其他篇目的是，此次既没有用到三角函数，也没有用到canvas，非常适合自学前端的小白！不过前提是你需要掌握transform、定时器和Date对象。

先来看下效果吧！

首先是html，代码如下：

<div class="wrap">
    <ul id="list"></ul> <!-- 刻度容器 -->
    <ul id="nub"></ul> <!-- 数字容器 -->
    <div class="dot"></div> <!-- 中心圆点 -->
    <div class="hour-hand hand"></div> <!-- 时针 -->
    <div class="min-hand hand"></div> <!-- 分针 -->
    <div class="sec-hand hand"></div> <!-- 秒针 -->
</div>

然后是css：

.wrap{
   
   width: 500px;
   height: 500px;