前端页面实现时钟效果

       各位友友们大家好，最近在家闲着无聊，为了锻炼自己的前端基础，我用前端三大件写了一个时钟。（发篇时本人计算机大二在读，按教学计划学校还未教前端知识。目前全靠自学，故有不足之处，还望同行多多指出）

       话不多说，先上效果图。

       

       该图即为我实现的最终效果，更多的优化可以留给大家去探索了。

       我的整体思路：

       1：画出时钟，这里需要大家思考一下如何才能画出钟表上的数字了，时钟是非常好画的（大家也可以直接用上一张时钟照片当背景，但如果为了考验自己可以自己试着去确定数字）。这里我用的是定位实现的，到了后面，我发现其实用二维动画里面的旋转一定角度更合适。我的时分秒就是如此实现的。

        

       这里就是我实现的部分代码了，根据位置来定位有一点非常不好，那就是你需要自己去计算大致的位置（由于钟表的圆形，使得位置非常难算），耗时且不够准确，所以我还是推荐大家采用我所说的第二种方法——用二维动画里面的旋转一定角度去实现。

        2：画出针头并实现其转动与获取系统时间。这里我用到了二维动画的transform属性。将他们的旋转中心设置为底部中心处，再设置一个定时器，每过一秒秒钟增加6度，分钟增加0.1度，时钟增加0.0083333度。同时，在旋转度数达到360时，我会将度数置零。我们都知道，计算机里面数据的存储是会占用空间的，如果一个数字一直增加到很大很大的话，就可能会出现一些错误，在不影响使用的前提下，我们可以适当的做出一些优化。

           

        这里便是我的js部分了。同时我增加了一个一秒的进场动画，以至于时钟开始走动的时候不会那么僵硬。 

        有不会的或者您有任何高见都可以发表在评论区一起讨论啊！感谢您的观看。