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

news2024/11/14 12:06:43

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

少年不曾迷茫，展翅飞往神域，坚定初心，踏实行动。

新的一年，收下少年的祝福，一起踏上新道路。 

💪(ง •_•)ง！！！

 

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

三、效果展示 

 背景图，罗盘时钟效果图

四、代码实现

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 很容易学习。

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 文件夹

包含罗盘显示背景图等

如下图所示

 五、获取源码

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

正确的文件如下图 

第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）

第二步，可以根据需求自定义背景

第三步，点击 html 文件打开即可，显示当前系统时间

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

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

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

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

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

  👍+✏️+⭐️+🙇‍

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/135276.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Boot 日志文件

Spring Boot 日志文件

1.日志有什么用&#xff1f; ⽇志是程序的重要组成部分&#xff0c;想象⼀下&#xff0c;如果程序报错了&#xff0c;不让你打开控制台看⽇志&#xff0c;那么你能找到报错的原因吗&#xff1f;答案是否定的&#xff0c;写程序不是买彩票&#xff0c;不能完全靠猜&#xff0c;…
阅读更多...
Blender 非线性编辑器

Blender 非线性编辑器

文章目录非线性编辑器介绍动画摄影表/动作编辑器与非线性编辑器NAL非线性编辑器基本操作复制动画片段混合动画片段动画片段N键菜单活动片段栏回放剪辑栏非线性编辑器介绍 1 非线性编辑器是动画制作的一部分&#xff0c;类似于PR的轨道&#xff0c;可以合并多个不同的动画动作 …
阅读更多...
【回答问题】ChatGPT上线了！推荐30个以上比较好的构建知识图谱源码

【回答问题】ChatGPT上线了！推荐30个以上比较好的构建知识图谱源码

在此列出30个比较好的构建知识图谱的源码&#xff1a; Neo4j AgensGraph JanusGraph AnzoGraph Cayley GraphDB ArangoDB FlockDB OrientDB Redis Graph Virtuoso TigerGraph HyperGraphDB Titan Stardog GraphQL GRAKN.AI AllegroGraph Blazegraph Google Cloud Bigtable Apa…
阅读更多...
10四个基本子空间

10四个基本子空间

四个基本子空间 四个基本空间介绍 对于一个 m*n 矩阵 A 来说&#xff0c;以下四个基本空间是其基础。 2.1 四个基本空间的维数与基 还是研究 m*n 的矩阵 A&#xff0c;其四个子空间的基本性质如下: &#xff08;1&#xff09;列空间 之前介绍过列空间的基&#xff0c;设矩…
阅读更多...
Go语言 值传递 引用传递 修改集合中的值

Go语言 值传递 引用传递 修改集合中的值

分类看一下Go的值传递和引用传递&#xff1a; 值传递&#xff1a;将值传递给函数 /* 引入单测包 */ import ("testing" )func TestSwap(t *testing.T) {x : 100y : 200swap(x, y)println("x:", x)println("y:", y) }/* 定义相互交换值的函数 *…
阅读更多...
自己编译docker镜像

自己编译docker镜像

有时候官方现在的docker镜像并不能很好地符合自己的需求&#xff0c;我们需要自己定制。以下我主要是在官方mariadb:latest镜像的基础上&#xff0c;做一些定制化的操作如修改容器的编码格式。 /root/.pip目录下有两个文件&#xff1a; Dockerfile的文件内容如下&#xff1a;…
阅读更多...
性能优化系列之你是否清楚浏览器的渲染过程？

性能优化系列之你是否清楚浏览器的渲染过程？

文章の目录1、浏览器解析 HTML&#xff0c;生成 DOM Tree&#xff08;Parse HTML&#xff09;。2、浏览器解析 CSS&#xff0c;生成 CSSOM&#xff08;CSS Object Model&#xff09; Tree。3、JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree&#x…
阅读更多...
Docker安装Kibana整合Elasticsearch[包含账号密码设置]

Docker安装Kibana整合Elasticsearch[包含账号密码设置]

文章目录一&#xff1a;拉取Es和Kibana镜像二&#xff1a;创建Es挂载目录2.1&#xff1a;挂载相关配置2.2&#xff1a;开放文件权限&#xff0c;否则后面运行容器会报错三&#xff1a;运行Es容器3.1: 运行参数说明3.2: 运行容器命令3.3: 开放防火墙四&#xff1a;运行Kibana容器…
阅读更多...
十四、Kubernetes中pod配置详解、实例

十四、Kubernetes中pod配置详解、实例

1、概述 在kubernetes中基本所有资源的一级属性都是一样的&#xff0c;主要包含5部分&#xff1a; apiVersion <string> 版本&#xff0c;由kubernetes内部定义&#xff0c;版本号必须可以用 kubectl api-versions 查询到 kind <string> 类型&#xff0c;由kuber…
阅读更多...
我辛辛苦苦做了一个月的项目，组长年底用来写了晋升PPT

我辛辛苦苦做了一个月的项目，组长年底用来写了晋升PPT

最近有朋友跟我吐槽&#xff0c;9月10月辛辛苦苦做了一个多月的项目&#xff0c;是一个重点项目&#xff0c;自己还是开发主力&#xff0c;但年底组长用来写了晋升PPT&#xff0c;汇报的时候还写的可圈可点&#xff0c;完全就是他做的样子。 目录 1、我也曾盼望升职加薪 2、结…
阅读更多...
【阶段二】Python数据分析NumPy工具使用03篇：数组的预处理、数组形状更改、数组转置与数组合并

【阶段二】Python数据分析NumPy工具使用03篇：数组的预处理、数组形状更改、数组转置与数组合并

本篇的思维导图： 数组的预处理 数据的类型转换 代码 结果 import numpy as
阅读更多...
网站收录查询，常用的2种网站收录查询方法

网站收录查询，常用的2种网站收录查询方法

在网站优化过程中&#xff0c;SEO人员通常都会非常关心网站的收录、索引情况&#xff0c;因为网站建立索引之后&#xff0c;才具有排名的条件。如何查询网站收录情况&#xff1f;今天我们聊聊常用的2种网站收录查询方法。第一种方法&#xff1a;通过site指令在搜索框查询 众多S…
阅读更多...
【Python】sklearn机器学习之Meanshift聚类算法

【Python】sklearn机器学习之Meanshift聚类算法

文章目录基本原理sklearn调用基本原理 凡聚类者&#xff0c;必有中心。按照这个思路&#xff0c;如果某个区域满足聚类的要求&#xff0c;那么其自然中心与样本均值应该是几乎重合的&#xff0c;这也是MeanShift算法的基本逻辑。 假设现有100个点&#xff0c;然后随机选择1个…
阅读更多...
day33【代码随想录】贪心算法之分发饼干、摆动序列、最大子序和、买卖股票的最佳时机 II

day33【代码随想录】贪心算法之分发饼干、摆动序列、最大子序和、买卖股票的最佳时机 II

文章目录前言一、分发饼干&#xff08;力扣455&#xff09;二、摆动序列&#xff08;力扣376&#xff09;1、贪心算法2、动态规划三、最大子序和&#xff08;力扣53&#xff09;四、买卖股票的最佳时机 II&#xff08;力扣122&#xff09;前言 1、分发饼干 2、摆动序列 3、最大…
阅读更多...
【Kuangbin区间DP】奶牛零食

【Kuangbin区间DP】奶牛零食

4558. 奶牛零食 - AcWing题库 题意&#xff1a; 写了Kuangbin的三道DP&#xff0c;三道都不会QwQ 是不是该remake了.... 思路&#xff1a; 一开始我天真的以为那个题单全是线性DP&#xff0c;然后我就自然而然往线性DP的方向上想了呜呜 我设 dp[i][j]表示阶段 i &#xff…
阅读更多...
你可以不用Git，但不能不会Git（一）概述

你可以不用Git，但不能不会Git（一）概述

目录 一.什么是Git 二.为什么要使用Git 三.Git和SVN对比 四.Git工作流程 五.Git下载与安装 一.什么是Git Git历史 很多人都知道&#xff0c;林纳斯托瓦兹在1991年创建了开源的Linux&#xff0c;从此&#xff0c;Linux系统不断发展&#xff0c;已经成为最大的服务器系统…
阅读更多...
Unity：从入门到入行【全面总结，建议收藏】

Unity：从入门到入行【全面总结，建议收藏】

史上最全干货系列 一、unity的安装与使用 1.unity安装资源 方法一&#xff1a; 通过http://unity.cn官网进行下载&#xff0c;详细教程可见下方链接。 Unity新手入门&#xff1a;新手如何安装Unity_哔哩哔哩_bilibili​www.bilibili.com/video/BV1Yb4y1f7zK?spm_id_from333…
阅读更多...
10_2、Java基本语法之注解(Annotation)的使用

10_2、Java基本语法之注解(Annotation)的使用

一、注解的理解 1、jdk5.0新增 2、在JavaSE中&#xff0c;注解的使用目的比较简单&#xff0c;例如标记过时的功能&#xff0c;忽略警告等。在JavaEE/Android中注解占据了更重要的角色&#xff0c;例如用来配置应用程序的任何切面&#xff0c;代替JavaEE旧版中所遗留的…
阅读更多...
小程序项目-后台交互（首页）

小程序项目-后台交互（首页）

目录 一&#xff0c;后台准备 配置数据源 整合mybatis 二&#xff0c;准备前端的首页的数据 封装request 会议展示 一&#xff0c;后台准备 先建一个新的项目&#xff0c;建好后导入相关的pom依赖&#xff0c;将 以下的一些工具类也准备好&#xff0c;工具类可参考前面…
阅读更多...
Django学习16 -- ModelAdmin options

Django学习16 -- ModelAdmin options

参考&#xff1a; Django Documentation Release 4.1.4.dev20221130072229&#xff0c;ModelAdmin options&#xff0c;P988 ~ P1007 &#xff08;补充更新。。。。。。&#xff09;Django学习7 -- 添加个人应用&#xff08;自定义应用页面优化&#xff09;Django学习8 -- 添加…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023