2D-时间罗盘(JavaScript)

一个带旋转、很漂亮的时间罗盘

简单讲下实现思路

1、先在html将所有元素按年、月、日、周、时、分、秒分类，每种类型以div划分，给div指定一个id，每个div下面的元素用 ul 的 li 包含，新建个 css 将所有 li 元素共用一个中心点，设置宽高、水平对齐、行对齐、背景、字段颜色等样式

• html 中部分代码截图
  

2、写个js文件将日期和html中的元素进行绑定，并设置每秒钟进行旋转

• 全部js代码如下

$(function () {
    /**
     * 旋转元素
     * @param elementId 元素Id
     * @param currNumber 日期数值
     * @param translateNumber 元素距离中心点的距离
     */
    function rotateElement(elementId, currNumber, translateNumber) {
        const $id = $('#' + elementId + ' ul li');
        // 圆所包含的元素个数
        let circleSize = $id.size();
        // 计算平均每个角的弧度
        let circleDeg = 360 / circleSize;
        // 计算角的弧度偏差
        let offsetDeg = circleDeg * currNumber;
        // 对与当前时间匹配的元素添加样式并去除其它元素的样式
        $id.eq(currNumber).addClass('elementActive').siblings().removeClass('elementActive');
        // 渲染所有元素
        for (let i = 0; i < circleSize; ++i) {
            $id.eq(i).css({
                'transition': currNumber === 0 ? '' : '.8s transform',
                'transform': 'rotate(' + (circleDeg * i - offsetDeg) + 'deg) translate(' + translateNumber + 'px, 0px)'
            })
        }
    }

    function init(callback) {
        let date = new Date();
        $("#yearId ul li").text(date.getFullYear() + "年");
        rotateElement('secondId', date.getSeconds(), 400);
        rotateElement('minusId', date.getMinutes(), 340);
        rotateElement('hourId', date.getHours(), 280);
        rotateElement('weekId', date.getDay() - 1, 220);
        rotateElement('dayId', date.getDate() - 1, 160);
        rotateElement('monthId', date.getMonth(), 100);
        rotateElement('yearId', date.getFullYear(), 0);

        (callback instanceof Function) && callback();
    }

    // 先初始化
    init(function () {
        // 循环调度
        setInterval(function () {
            init();
        }, 1000);
    });

});

• 完整代码下载地址： 点我