html实现WordsClock（文字时钟）

WordsClock-html低配版实现（所见即所得）

最近在抖音上看到的那个window的WordsClock屏保，特别有感觉，作为垃圾前端程序员的我，经不住好看的诱惑决定利用html实现。

效果图

（这种时钟感觉特别像八卦图）

开发思路（html+jq）

（jq都不维护了，为什么用jq ？方便啊~~~）

1. 时、分、秒 三个圈圈的摆放位置
2. 根据时间点亮对应的文字
3. 时间变化 开始转圈圈
4. 转圈圈的同时 先前点亮的文字熄灭 当前时间的文字点亮

虽然思路很简单 ，但是实际操作起来还是有坑的

实现（具体代码就不码出来了 只说说有坑的地方）

（也许我遇见的坑，是个垃圾坑，不过作为菜鸟的我还是得记下来积累经验）

1. 摆放位置
   利用jq生成节点 并设置旋转角度 记得设置旋转的锚点 transform-origin:bottom center;
2. 转圈圈
   利用css的transiform控制选装 transition设置旋转动画的事件 （小于0.5s）
3. 时间计时器setInterval
   这里有个坑 setInterval({},1000); 会延时1秒钟后 再开始执行。所以秒钟的变化要提前一秒
4. 当秒钟变为60秒的时候 分钟就要开始变化 要不然就会比现在的实现慢1秒

总结

git地址：https://github.com/Awenc/WordsClock

第一次写博客也不知道规矩 反正就这么写吧，如果有什么错误的地方 请各位大佬指出，我会马上改正

谢谢！~