每天学一个jquery插件-罗盘时钟哒1

每天一个jquery插件-罗盘时钟哒1

罗盘时钟哒1

今天又是元气满满的一天，嗯，又是找目标的一天，今天看着我手机屏保上的时钟屏保，想到了一个有意思的jquery插件，就是罗盘时钟，之前一直想着要实现一下，所以今天决定就研究这个罗盘时钟。

先给大家看看目标效果这是传送门

效果已经看清楚了，就想想该怎么实现

• 首先我得把表盘弄出来，还得是个圆的，并且目标文字得均匀平铺在圆盘的边上，不过我看了一下大佬的作品之后发现，和我之前实现另外一个东西的思路很像，其实就是挨个加载的时候通过样式控制元素的表现形式，然后把这个dom旋转到指定的位置，所以说我要弄出来这样一个表盘渲染五个boxs，分别是月（12）日(28-31）,时(24)分(60)秒(60),里面还得渲染这么多个文字，额，难道没得围绕边框的css嘛，其实有，不过写的话不好控制，所以说这个是最方便的和拓展性最好的一种方式估计
• 外观渲染完毕之后，我就得想想动画怎么实现，其实这个也简单，反正变形里面给渲染本身再加上360/节点数量（deg）的旋转角度，这个表盘就能转起来了，具体咋控制得好好想想咋写方便
• 参数获取的考虑，当然这个表盘到底是靠当前时间加载数据之后再渲染表盘，还是表盘渲染完毕获取时间之后再校对位置，要是我的话应该是选择后者吧，前者不知道咋实现,要是前者能够实现那反倒简单，计时器挂着然后每秒钟渲染一次，不过这样感觉太折腾，算了
• 还有一个就是数据展示的时候表盘的字体是咋变色的，就是当前时间的下一个时间要走到展示的位置了，是咋变色的，这个就很费解，要是我来做肯定又是css控制了，不过那样动画效果就会很僵硬，不过先试试，看情况再找找新的方法
• 其他的再想想，明天再完善出结果，啊哈