2D-时间罗盘(JavaScript)

约定不等于承诺〃 2023-07-04 15:59 21阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNjk4OTgz_size_16_color_FFFFFF_t_70]

#### 简单讲下实现思路 ####

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

*  html 中部分代码截图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNjk4OTgz_size_16_color_FFFFFF_t_70 1]

**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);
        });
    
    });

*  完整代码下载地址： [点我][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNjk4OTgz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200213094919778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNjk4OTgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNjk4OTgz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200213100352635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNjk4OTgz,size_16,color_FFFFFF,t_70
[Link 1]: https://download.csdn.net/download/qq_20698983/12153596