抖音超火的罗盘时钟

抖音超火的罗盘时钟

利用原生js，实现的罗盘时钟效果

实现效果

实现思路

将数字摆成圆环

获取当前时间，让圆环旋转一定的角度，转到水平位置

将当前时间变亮

实现的思路还是很简单的，但是在过程中会有很多的细节需要考虑到

实现过程

解析几个重要部分

搭建HTML框架

因为数字的量太大，采用js动态生成数字

js生成数字

这个函数是我用来生成日期，时间数字的,传入了5个参数确实有点多了

第一个参数num:传入循环的终点

第二个参数date:传入要生成的标签加在哪里，也就是是谁下的标签

第三个参数target:传入单位，时分秒这些

第四个参数bool:传入是否，用来指定是否要补零

第五个参数origin:传入它的起始点

由于使用 dom 操作会消耗性能，这里需要大量的添加 dom 节点，如果使用简单的for循环生成节点，会多次的修改 dom 结构

为了提高性能，可以建立一个文档碎片documentfragment，作为临时容器，最后一次再加到父节点中

function create(num,date,target,bool,origin) { var fragment = document.createDocumentFragment(); for(var i = origin; i < num ; i ++) { var j = i; if(bool){ j = j > 9 ? j : '0' + j; } var span = document.createElement('span'); span.appendChild(document.createTextNode(j + target)); fragment.appendChild(span); } date.appendChild(fragment); }

展示表盘，也就是生成圆形的效果

通过定位将全部span盒子定位在一起，通过transfromX将盒子一开，作为半径，再通过给每个盒子旋转一份角度，使得盒子均匀的散开

function rot(target,distance) { var rotBox = target.children; for(var i = 0 ;i < rotBox.length ; i ++ ){ rotBox[i].style.transform = 'rotate(' + (360 / rotBox.length ) * i + 'deg)' + 'translateX(' + distance + ')' ; } }

由于页面加载需要一定时间，会导致js代码未能立即执行，页面会有一段空白阶段,所以添加一个立即执行函数让页面一加载就有效果呈现

实现代码

CSS

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。