记，罗盘时钟使用js实现

我就是我 2022-01-06 03:31 281阅读 0赞

完成一个如下的罗盘时钟

![罗盘时钟][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70]

简单分析需要哪些步骤。  
1.生成罗盘

2.让罗盘随着当前时间转动，指示出当前对应时间

## 实现 ##

### 罗盘元素创建 ###

**生成元素**。创建一个生成元素的函数createLabel();

function createLabel(text) {
        var div = document.createElement('div');
        div.classList.add('label');
        div.innerText = text;
        return div;
    }

工具有了，再创建个函数循环调用元素生成工具进行生产，直到生成所有圈。

var monthText = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
    
    var clock;
    
    function init() {
        clock = document.getElementById('clock');
          for (var j = 0; j < monthText.length; j++) {
              var temp = createLabel(monthText[j]);
              clock.appendChild(temp);
          }
    }

上面生成了只生成了一圈，下面继续扩展下代码，生成所有圈。

var monthText = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
    var dayText = ["一号", "二号", "三号", "四号", "五号", "六号", "七号", "八号", "九号", "十号", "十一号", "十二号", "十三号", "十四号", "十五号", "十六号", "十七号", "十八号", "十九号", "二十号", "二十一号", "二十二号", "二十三号", "二十四号", "二十五号", "二十六号", "二十七号", "二十八号", "二十九号", "三十号", "三十一号"];
    var weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var hourText = ["零点", "一点", "两点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点", "十三点", "十四点", "十五点", "十六点", "十七点", "十八点", "十九点", "二十点", "二十一点", "二十二点", "二十三点"];
    var minuteText = ["一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分", "十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分", "二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分", "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分", "四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分", "五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", "六十分"];
    var secondsText = ["一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒", "十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒", "二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒", "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒", "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒", "五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", "六十秒"];
    var clock;
    var monthList = [];
    var dayList = [];
    var weekList = [];
    var hourList = [];
    var minuteList = [];
    var secondsList = [];
    var textSet = [[monthText, monthList], [dayText, dayList], [weekText, weekList], [hourText, hourList], [minuteText, minuteList], [secondsText, secondsList]];
    
    function init() {
        clock = document.getElementById('clock');
        for (var i = 0; i < textSet.length; i++) {
            for (var j = 0; j < textSet[i][0].length; j++) {
                var temp = createLabel(textSet[i][0][j]);
                clock.appendChild(temp);
                textSet[i][1].push(temp);
            }
        }
    }

然后调用后，生成如下效果![罗盘效果1][1]

接下来就是把这些元素重新排列，按照对应数组摆成一个个内嵌圆环，形成罗盘初样。

定义个函数，**功能**：每秒对各个元素进行一次边距【left，top】的移动，为使移动顺滑，元素设置关于left和top的动画效果。当前时间对应元素高亮处理，其它置灰。

.label {
        display: inline-block;
        color: #4d4d4d;
        text-align: center;
        padding: 0 20px;
        font-size: 24px;
        transition: left 1s, top 1s;
        transform-origin: 0% 0%
    }

function runTime() {
        var now = new Date();
        var month = now.getMonth();
        var day = now.getDate();
        var week = now.getDay();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var seconds = now.getSeconds();
        initStyle();
        var nowValue = [month, day - 1, week, hour, minute, seconds];
        for (var i = 0; i < nowValue.length; i++) {
            var num = nowValue[i];
            textSet[i][1][num].style.color = '#fff';
        }
        var widthMid = document.body.clientWidth / 2;
        var heightMid = document.body.clientHeight / 2;
        for (var i = 0; i < textSet.length; i++) {
            for (var j = 0; j < textSet[i][0].length; j++) {
                var r = (i + 1) * 35 + 80 * i;
                // var deg = 360 / textSet[i][1].length * (j - nowValue[i]);
                var deg = 360 / textSet[i][1].length * (nowValue[i] - j);
                var x = r * Math.sin(deg * Math.PI / 180) + widthMid;
                var y = heightMid - r * Math.cos(deg * Math.PI / 180);
                var temp = textSet[i][1][j];
                textSet[i][1][j].style.position = "absolute";
                temp.style.transform = 'rotate(' + (-90 + deg) + 'deg)';//deg每个元素所占角度，-90旋转字体使其沿着r方向排列
                temp.style.left = x + 'px';
                temp.style.top = y + 'px';
            }
        }
    }
    
    function initStyle() {
        var label = document.getElementsByClassName('label');
        for (var i = 0; i < label.length; i++) {
            label[i].style.color = '#4d4d4d';
        }
    }

此时，已完成高亮显示当前时间的罗盘。

每秒重绘一次。

window.onload = function () {
        init();
        setInterval(function () {
            runTime();
        }, 100);
    }

这里没有设置1000，是防止获取当前时间出现误差，1的话消耗性能没必要，就随意取了个100。

最后将罗盘摆正。最终代码如下：

var monthText = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
    var dayText = ["一号", "二号", "三号", "四号", "五号", "六号", "七号", "八号", "九号", "十号", "十一号", "十二号", "十三号", "十四号", "十五号", "十六号", "十七号", "十八号", "十九号", "二十号", "二十一号", "二十二号", "二十三号", "二十四号", "二十五号", "二十六号", "二十七号", "二十八号", "二十九号", "三十号", "三十一号"];
    var weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var hourText = ["零点", "一点", "两点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点", "十三点", "十四点", "十五点", "十六点", "十七点", "十八点", "十九点", "二十点", "二十一点", "二十二点", "二十三点"];
    var minuteText = ["一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分", "十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分", "二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分", "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分", "四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分", "五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", "六十分"];
    var secondsText = ["一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒", "十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒", "二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒", "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒", "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒", "五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", "六十秒"];
    var clock;
    var monthList = [];
    var dayList = [];
    var weekList = [];
    var hourList = [];
    var minuteList = [];
    var secondsList = [];
    var textSet = [[monthText, monthList], [dayText, dayList], [weekText, weekList], [hourText, hourList], [minuteText, minuteList], [secondsText, secondsList]];
    window.onload = function () {
        init();
        // changePosition();
        setInterval(function () {
            runTime();
        }, 100);
        setTimeout(function () {
            changeCircle();
        }, 1000);
    }
    
    function init() {
        clock = document.getElementById('clock');
        for (var i = 0; i < textSet.length; i++) {
            for (var j = 0; j < textSet[i][0].length; j++) {
                var temp = createLabel(textSet[i][0][j]);
                clock.appendChild(temp);
                textSet[i][1].push(temp);
            }
        }
        runTime();
    }
    
    function createLabel(text) {
        var div = document.createElement('div');
        div.classList.add('label');
        div.innerText = text;
        return div;
    }
    
    function runTime() {
        var now = new Date();
        var month = now.getMonth();
        var day = now.getDate();
        var week = now.getDay();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var seconds = now.getSeconds();
        initStyle();
        var nowValue = [month, day - 1, week, hour, minute, seconds];
        for (var i = 0; i < nowValue.length; i++) {
            var num = nowValue[i];
            textSet[i][1][num].style.color = '#fff';
        }
        var widthMid = document.body.clientWidth / 2;
        var heightMid = document.body.clientHeight / 2;
        for (var i = 0; i < textSet.length; i++) {
            for (var j = 0; j < textSet[i][0].length; j++) {
                var r = (i + 1) * 35 + 80 * i;
                var deg = 360 / textSet[i][1].length * (j - nowValue[i]);
                //var deg = 360 / textSet[i][1].length * (nowValue[i] - j);//顺时针
                var x = r * Math.sin(deg * Math.PI / 180) + widthMid;
                var y = heightMid - r * Math.cos(deg * Math.PI / 180);
                var temp = textSet[i][1][j];
                textSet[i][1][j].style.position = "absolute";
                temp.style.transform = 'rotate(' + (-90 + deg) + 'deg)';//deg每个元素所占角度，-90旋转字体使其沿着r方向排列
                temp.style.left = x + 'px';
                temp.style.top = y + 'px';
            }
        }
    }
    
    function initStyle() {
        var label = document.getElementsByClassName('label');
        for (var i = 0; i < label.length; i++) {
            label[i].style.color = '#4d4d4d';
        }
    }
    
    function changeCircle() {
        clock.style.transform = "rotate(90deg)";
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70]: /images/20211228/382ce2fda52340c6af1bdd85f1d8fecc.png
[1]: /images/20211228/0786a45f708e410bbef0c58235ea3ce1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍

【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍

谁践踏了优雅/ 2024年04月28日 08:00/ 0 赞/ 11 阅读

相关 html+css+js实现时钟

html+css+js实现比较特别的时钟简介：为止，在中国历史上有留下记载的四代计时器分别为：日晷、沙漏、机械钟、石英钟。在中国市场上石英钟最热销。时钟一直

清疚/ 2024年03月30日 17:57/ 0 赞/ 12 阅读

相关文字时钟罗盘动态html代码_网红手机壁纸，罗盘时钟壁纸来了！

![e1a10e12c2901082abdfe272f92c8489.png][] 大家好，我是互联网小技巧小编茂茂，每天打开手机你想看不想看都得看到手机壁纸，一个酷炫的手机

迈不过友情╰/ 2023年01月05日 12:14/ 0 赞/ 98 阅读

相关 js实现简单的网页时钟

<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title

╰+哭是因爲堅強的太久メ/ 2022年02月22日 16:52/ 0 赞/ 266 阅读

相关 python实现抖音上比较火的罗盘时钟

抖音上比较有趣的罗盘时钟，今天用turtle来画一下，基本功能实现了，拿来练习一下turtle,感觉还可以吧 turtle的安装 sudo apt-get

╰+哭是因爲堅強的太久メ/ 2022年01月29日 14:17/ 0 赞/ 1172 阅读

相关 JS实现简单时钟效果

老师上课需要我们做一个时钟的小作业，我把它放在上面记录一下啦表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，tran

我会带着你远行/ 2022年01月25日 15:39/ 0 赞/ 268 阅读

相关记，罗盘时钟使用js实现

完成一个如下的罗盘时钟 ![罗盘时钟][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

我就是我/ 2022年01月06日 03:31/ 0 赞/ 282 阅读

相关 jQuery 仿抖音时钟罗盘转动效果

在线预览地址：[http://www.jq22.com/jquery-info21839][http_www.jq22.com_jquery-info21839] 效果

小鱼儿/ 2021年12月18日 19:34/ 0 赞/ 368 阅读

相关自定义 View 之抖音时钟罗盘仪效果

> 博主声明： > > 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 [威威喵][Link 1] 原创，请多支持与指教。 > > [本文首发于此][Link

绝地灬酷狼/ 2021年11月02日 02:38/ 0 赞/ 516 阅读

相关 js实现动态时钟

> 发现一个超级好用的gif图工具"抠抠视频秀"，很好用也不占内存，长这样 > ![在这里插入图片描述][20190820011431901.png] 1. 效果图

以你之姓@/ 2021年10月26日 13:22/ 0 赞/ 374 阅读