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

谁践踏了优雅 2024-04-28 08:00 4阅读 0赞

> 唯有热爱，可抵岁月漫长，唯有热爱，不畏世间无常！

> 少年不曾迷茫，展翅飞往神域，坚定初心，踏实行动。
> 
> 新的一年，收下少年的祝福，一起踏上新道路。
> 
> 💪(ง •\_•)ง！！！

![0fec05d7ab7f49b49cfa2e4c275627c2.png][]

> There is a Crack in Everything, That's How the Light Gets in.
> 
> 万物皆有裂痕，那是光进来的地方。

**目录**

一、前言

二、创意设计

三、效果展示

四、代码实现

index.html

js 文件夹

css 文件夹

image 文件夹

五、获取源码

需要源码，可以私信我(⊙o⊙)？关注我？

--------------------

### 一、前言 ###

> 不知道最近这几天大家过得怎么样呢？
> 
> 祝大家新年快乐啊！！！
> 
> 这是我2023年的新一篇文章，希望可以得到大家的支持🙇

--------------------

### 二、创意设计 ###

> 1、HTML精彩罗盘时钟
> 
> 2、好看的背景图
> 
> 3、精确本地同步时间
> 
> 4、CSS
> 
> 5、JS

--------------------

### 三、效果展示 ###

![c715eaf48b53407ebdc57599a6b5137e.png][]

![5d139b3be303477db12b3def09dddb10.png][]

**背景图，罗盘时钟效果图**

--------------------

### 四、代码实现 ###

> #### index.html ####

这个 **html** 代码比较简单，更多的是引用了 **css / js样式等** 因此在**调试代码时**应注意**路径**问题

不太理解或者刚刚入坑的小伙伴们，可以学习一下的**绝对路径与相对路径**相关问题

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>罗盘</title>
        <script>
          console.log("微信公众号搜索 Enovo开发工厂");
          console.log("CSDN搜索 Enovo_飞鱼");
        </script>
        <link rel="stylesheet" href="css/clock.css" />
      </head>
      <body>
        <ul class="clock" id="helang-clock">
          <hr />
        </ul>
    
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/clock.js"></script>
        <script type="text/javascript">
          $("#helang-clock").clock();
        </script>
      </body>
    </html>

> #### js 文件夹 ####

内含**两个.js** 文件，分别是 **olcok.js** 及  **jquery.min.js**

下面显示的是 **clock.js 代码**

**也主要的 js 代码 控制及显示罗盘时钟信息**

**注意观察哦(⊙o⊙)！**

> **clock.js**

console.log("微信公众号搜索 Enovo开发工厂");
    console.log("CSDN搜索 Enovo_飞鱼");
    
    $.fn.extend({
        /* 时钟 */
        clock:function () {
            var HL={};
            HL.$el=$(this);
            HL.ZHCNArr=['零','一','二','三','四','五','六','七','八','九','十'];
            /* 转为简体中文 */
            HL.changeZHCN=function (value) {
                /* 小于 10 */
                if(value<10){
                    return this.ZHCNArr[value];
                }
    
                var val=value.toString(),str='';
                /* 整 10 */
                if(val.charAt(1)==0){
                    if(val.charAt(0)!=1){
                        str=this.ZHCNArr[parseInt(val.charAt(0),10)];
                    }
                    str+=this.ZHCNArr[10];
                    return str;
                }
    
                /* 小于 20 */
                if(value<20){
                    str=this.ZHCNArr[10]+this.ZHCNArr[parseInt(val.charAt(1),10)];
                    return str;
                }
    
                str=this.ZHCNArr[parseInt(val.charAt(0),10)]+this.ZHCNArr[10]+this.ZHCNArr[parseInt(val.charAt(1),10)];
                return str;
            };
    
            /* 设置日期 */
            HL.setDate=function(){
                var yearStr='',monthStr='',dayStr='';
                var y=this.dateInfo.year.toString();
                for(var i=0;i<y.length;i++){
                    yearStr+=this.changeZHCN(parseInt(y.charAt(i),10));
                }
                monthStr=this.changeZHCN(this.dateInfo.month);
                dayStr=this.changeZHCN(this.dateInfo.day);
                if(this.els){
                    this.els.date.html(yearStr+'年'+monthStr+'月'+dayStr+'日');
                }else {
                    this.$el.append('<li class="date">'+(yearStr+'年'+monthStr+'月'+dayStr+'日')+'</li>');
                }
            };
    
            /* 设置小时 */
            HL.setHour=function(){
                var str='',rotateArr=[];
                for(var i=1;i<=24;i++){
                    rotateArr.push(r=360/24*(i-1)*-1);
                    str+='<div><div>'+(this.changeZHCN(i))+'时</div></div>';
                }
                this.$el.append('<li class="hour on-hour">'+str+'</li>');
    
                setTimeout(function () {
                    HL.$el.find(".on-hour>div").each(function (index,el) {
                        $(el).css({
                            "transform":"rotate("+rotateArr[index]+"deg)"
                        })
                    });
                    setTimeout(function () {
                        HL.setMinute();
                    },300);
                },100)
            };
    
            /* 设置分钟 */
            HL.setMinute=function(){
                var str='',rotateArr=[];
                for(var i=1;i<=60;i++){
                    rotateArr.push(360/60*(i-1)*-1);
                    str+='<div><div>'+(this.changeZHCN(i))+'分</div></div>';
                }
                this.$el.append('<li class="hour minute on-minute">'+str+'</li>');
    
                setTimeout(function () {
                    HL.$el.find(".on-minute>div").each(function (index,el) {
                        $(el).css({
                            "transform":"rotate("+rotateArr[index]+"deg)"
                        })
                    });
                    setTimeout(function () {
                        HL.setSec();
                    },300)
                },100);
            };
    
            /* 设置秒 */
            HL.setSec=function(){
                var str='',rotateArr=[];
                for(var i=1;i<=60;i++){
                    rotateArr.push(360/60*(i-1)*-1);
                    str+='<div><div>'+(this.changeZHCN(i))+'秒</div></div>';
                }
                this.$el.append('<li class="hour sec on-sec">'+str+'</li>');
                setTimeout(function () {
                    HL.$el.find(".on-sec>div").each(function (index,el) {
                        $(el).css({
                            "transform":"rotate("+rotateArr[index]+"deg)"
                        })
                    });
                    setTimeout(function () {
                        HL.initRotate();
                    },1300);
                },100);
            };
    
            /* 初始化滚动位置 */
            HL.initRotate=function(){
                this.rotateInfo={
                    "h":360/24*(this.dateInfo.hour-1),
                    "m":360/60*(this.dateInfo.minute-1),
                    "s":360/60*(this.dateInfo.sec-1),
                };
                this.els={
                    "date":this.$el.find(".date"),
                    "hour":this.$el.find(".on-hour"),
                    "minute":this.$el.find(".on-minute"),
                    "sec":this.$el.find(".on-sec")
                };
                this.els.hour.css({
                    "transform":"rotate("+this.rotateInfo.h+"deg)"
                });
                this.els.minute.css({
                    "transform":"rotate("+this.rotateInfo.m+"deg)"
                });
                this.els.sec.css({
                    "transform":"rotate("+this.rotateInfo.s+"deg)"
                });
    
                setTimeout(function () {
                    HL.$el.find("hr").addClass("active").css({
                        "width":"49%"
                    });
                    HL.start();
                },300);
            };
    
            /* 启动 */
            HL.start=function(){
                setTimeout(function () {
                    if(HL.dateInfo.sec<=60){
                        HL.dateInfo.sec++;
                        var r=360/60*(HL.dateInfo.sec-1);
                        HL.els.sec.css({
                            "transform":"rotate("+r+"deg)"
                        });
    
                        HL.minuteAdd();
                        HL.start();
                    }else {
                        console.log(HL.dateInfo.sec)
                    }
                },1000);
            };
    
            /* 分钟数增加 */
            HL.minuteAdd=function(){
                if(HL.dateInfo.sec==60+1){
                    setTimeout(function () {
                        HL.els.sec.css({
                            "transform":"rotate(0deg)",
                            "transition-duration": "0s"
                        });
                        HL.dateInfo.sec=1;
                        setTimeout(function () {
                            HL.els.sec.attr("style","transform:rotate(0deg)");
                        },100);
                        HL.dateInfo.minute++;
                        var r=360/60*(HL.dateInfo.minute-1);
                        HL.els.minute.css({
                            "transform":"rotate("+r+"deg)"
                        });
                        HL.hourAdd();
                    },300);
                }
            };
    
            /* 小时数增加 */
            HL.hourAdd=function(){
                if(HL.dateInfo.minute==60+1){
                    setTimeout(function () {
                        HL.els.minute.css({
                            "transform":"rotate(0deg)",
                            "transition-duration": "0s"
                        });
                        HL.dateInfo.minute=1;
                        setTimeout(function () {
                            HL.els.minute.attr("style","transform:rotate(0deg)");
                        },100);
                        HL.dateInfo.hour++;
                        var r=360/24*(HL.dateInfo.hour-1);
                        HL.els.hour.css({
                            "transform":"rotate("+r+"deg)"
                        });
                        HL.dayAdd();
                    },300);
                }
            };
    
            /* 天数增加 */
            HL.dayAdd=function(){
                if(HL.dateInfo.hour==24+1){
                    setTimeout(function () {
                        HL.els.hour.css({
                            "transform":"rotate(0deg)",
                            "transition-duration": "0s"
                        });
                        HL.dateInfo.hour=1;
                        setTimeout(function () {
                            HL.els.hour.attr("style","transform:rotate(0deg)");
                        },100);
    
                        var nowDate=new Date();
                        HL.dateInfo.year=nowDate.getFullYear();
                        HL.dateInfo.month=nowDate.getMonth()+1;
                        HL.dateInfo.day=nowDate.getDate();
                        HL.setDate();
                    },300);
                }
            };
    
    
            /* 初始化 */
            HL.init=function(){
                var nowDate=new Date();
                this.dateInfo={
                    "year":nowDate.getFullYear(),
                    "month":nowDate.getMonth()+1,
                    "day":nowDate.getDate(),
                    "hour":nowDate.getHours(),
                    "minute":nowDate.getMinutes(),
                    "sec":nowDate.getSeconds()
                };
                console.log(this.dateInfo);
    
                this.setDate();
                this.setHour();
            };
    
    
            HL.init();
        }
    });

>  **jquery.min.js**

主要是 **jQurey** 相关内容

大家可以学习一下这个 jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

![c090ed319fbf4206a8f8b827fb0bec05.png][]

--------------------

> #### css 文件夹 ####

包含一个 **.css** 文件

主要是**调整显示样式**

> **olock.css**

body{
        font-size: 14px;
        color: white;
        font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
        background: url(../image/23.jpg) no-repeat;
        padding: 0;
        margin: 0;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover; 
    }
    .clock{
        list-style: none;
        margin: auto;j'p'g
        padding: 0;
        width: 700px;
        height: 700px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        line-height: 20px;
    
        user-select: none;
    
    }
    
    .clock .date{
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 20px;
        text-align: center;
        top: 340px;
        left: 0;
    }
    .clock .hour{
        position: absolute;
        z-index: 3;
        width: 360px;
        height: 20px;
        top: 340px;
        left: 170px;
        transition: transform 0.3s ease-in-out 0s;
        transform:rotate(0deg);
    }
    .clock .hour>div{
        position: absolute;
        width: 100%;
        right: 0;
        top: 0;
        transition: transform 1s ease-in-out 0s;
        transform:rotate(0deg);
    }
    .clock .hour>div>div{
        float: right;
        width: 60px;
        text-align: right;
    }
    
    .clock .minute{
        position: absolute;
        z-index: 4;
        width: 520px;
        height: 20px;
        top: 340px;
        left: 90px;
    }
    .clock .sec{
        position: absolute;
        z-index: 5;
        width: 680px;
        height: 20px;
        top: 340px;
        left: 10px;
    }
    
    .clock>hr{
        height: 0;
        width: 0%;
        position: absolute;
        z-index: 1;
        border: #ffffff solid 0;
        border-bottom-width: 1px;
        margin: 10px 0 0 0;
        left: 50%;
        top: 50%;
        transition: width 0.3s ease-in-out 0s;
        overflow: visible;
    }
    .clock>hr.active:before{
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: yellow;
        top: -2px;
        left: 0;
        position: absolute;
    
    }

--------------------

> #### image 文件夹 ####

包含**罗盘显示背景图**等

如下图所示

![f216725c73f148b0913a702bc0ebfe57.png][]

--------------------

### 五、获取源码 ###

> 老规矩，先给朋友们看一下完整文件夹

正确的文件**如下图**

![166daca7076b43bf9896abb60ff76d15.png][]

> 第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）
> 
> 第二步，可以根据需求自定义背景
> 
> 第三步，点击 html 文件打开即可，显示当前系统时间

**作为新年第一辑，希望得到大家的喜欢🙇**

**新的开始，又是一个崭新的开始，充满信心，充满希望，充满阳光，走向明天，走向理想！**

此时我们就可以看到完美的罗盘时钟了

以上就是我们此次罗盘时钟的全部内容了，是否精彩呢？如果有好的建议或者想法可以联系我，一起交流🙇

--------------------

### 需要源码，可以私信我(⊙o⊙)？关注我？ ###

> 👍+✏️+⭐️+🙇

有需要源码的小伙伴可以 **关注下方微信公众号 " Enovo开发工厂 "**，回复 关键词 " **1-clock** "

[0fec05d7ab7f49b49cfa2e4c275627c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/c1b18cb37a5644699a3716e1e8f2547d.png
[c715eaf48b53407ebdc57599a6b5137e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/5a0d97fad8d04a0a811787ce9685e4d3.png
[5d139b3be303477db12b3def09dddb10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/5673c8baff594a3c87cef6f7b94c6b97.png
[c090ed319fbf4206a8f8b827fb0bec05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/2ca4672d2d624be592e493b4362b2785.png
[f216725c73f148b0913a702bc0ebfe57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/3197b14510564700b55507f8d56eb317.png
[166daca7076b43bf9896abb60ff76d15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/6ef9980dad3a4247b3b06c6182b67556.png