时钟之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);
}

实现效果