抖音超火的罗盘时钟

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

实现效果

实现思路

1. 将数字摆成圆环
2. 获取当前时间，让圆环旋转一定的角度，转到水平位置
3. 将当前时间变亮

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

实现过程

解析几个重要部分

1. 搭建HTML框架

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

2. 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);
}

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

通过定位将全部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 + ')' ;
            }
        }

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

实现代码