时钟之CSS+JS版

写在前面

此版本绘制的时钟基于CSS+JS模式。

优点操作简单，缺点当然是不够灵活。下一篇会基于HTML5的canvas标签，使用JS绘制。会更灵活，元素更加丰富。

HTML代码

<div class="box">
    <article class="clock">
        <!--  每个指针都需要一个 *-container容器 -->
        <div class="hours-container">
            <div class="hours"></div>
        </div>
        <div class="minutes-container">
            <div class="minutes"></div>
        </div>
        <div class="seconds-container">
            <div class="seconds"></div>
        </div>
    </article>
</div>

CSS代码

.box {
    width: 10rem;
    height: 10rem;
    background: rgb(205,205,205, .1);
    border-radius: 1rem;
    margin: 5% auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .box使用 Flex 布局方式，并且使其中的 .clock水中、垂直方向都居中。*/
.clock {
    width: 10rem;
    height: 10rem;
    background: rgb(244, 244, 244, .1) url(../img/clock.png) no-repeat center;
    background-size: cover;
    background-size: 100%;
    border-radius: 50%;
    position: relative;
}
/*添加中心轴：使用 CSS3 中的 伪元素 为时钟添加实心小圆点，指针都围着这个点转。*/
.clock:after {
    content: "";  /* 这句 content: ''; 是必须的，不然这个伪元素不会显示，即使指定了宽度和高度。 */
    width: 1rem;
    height: 1rem;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);   /* !!!向左上移动自身的50% */
    z-index: 10;  /* 是为了使这个小圆点在视图的最上层，遮挡住指针交叉的地方 */
}
/*由于相对定位是从元素的左上角开始计算的，所以 top: 50%; left: 50%; 不能使这个小圆点在 Clock 的中心，使用 transform: translate(-50%,-50%); 向左上方移动自身宽度或高度的 50%*/

/*指针容器: 容器被放置在 Clock 的上方*/
.hours-container,.minutes-container,.seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/*添加指针：设置指针样式*/
.hours {
    width: 3%;
    height: 20%;
    background: rgb(0, 0, 0, .8);
    transform-origin: 50% 100%; /* transform-origin: 50% 90%; 规定指针旋转的位置为：X 方向的中心线 和 Y 方向的 90% 处这条线的交叉点。*/
    position: absolute;
    top: 35%;
    left: 48.5%;
}
.minutes {
    width: 2%;
    height: 30%;
    background: rgb(13, 2, 223, .8);
    transform-origin: 50% 100%; 
    position: absolute;
    top: 24%;
    left: 49%;

}
.seconds {
    width: 1%;
    height: 40%;
    background: rgb(255, 0, 0, .8);
    transform-origin: 50% 100%;
    position: absolute;
    top: 20%;
    left: 49.5%;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

JS代码

function frame() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    const sDeg = (seconds % 60) * 6;// 描述实际对应度数
    const mDeg = (minutes % 60) * 6 + (seconds % 60) * 6 / 360 * 6;// 分针实际对应度数 + 秒针跑过折算度数
    const hDeg = (hours > 12 ? hours % 24 : hours % 12) * 30 + (minutes % 60) * 6 / 360 * 30;// 时针实际对应度数 + 分针跑过折算度数

    document.querySelector('.seconds-container').style.transform = "rotate(" + sDeg + "deg)";
    document.querySelector('.minutes-container').style.transform = "rotate(" + mDeg + "deg)";
    document.querySelector('.hours-container').style.transform = "rotate(" + hDeg + "deg)";
}
window.onload = function() {
    frame();
    setInterval(frame, 1000);
}

实现效果