HTML + JavaScript + CSS 实现罗盘时钟背景版

最新推荐文章于 2023-04-08 16:30:11 发布
最新推荐文章于 2023-04-08 16:30:11 发布
阅读量266 收藏
点赞数
文章标签： css html javascript
原文链接：https://blog.csdn.net/qq_44731019/article/details/119118842
版权
这个博客展示了如何使用HTML、CSS和JavaScript创建一个数字时钟，将时间以中文显示。HTML文件包含了页面结构和外部样式表及脚本引用。CSS文件定义了背景、字体和元素样式，而JavaScript文件（clock.js）则负责动态更新时间并将其转换为中文。通过jQuery库，时钟的小时、分钟和秒针会随着时间转动，实现了实时显示当前时间的功能。
摘要由CSDN通过智能技术生成

在这里插入图片描述

在这里插入图片描述

clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <link rel="stylesheet" href="css/clock.css">
</head>
<body>
<ul class="clock" id="helang-clock">
    <hr>
</ul>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/clock.js" ></script>
<script type="text/javascript">
    $("#helang-clock").clock();
</script>
</body>
</html>

clock.css

body{
    font-size: 14px;
    color: #ffffff;
    font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
    background: url(../image/1.jpg) no-repeat;
    padding: 0;
    margin: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}
.clock{
    list-style: none;
    margin: auto;
    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: #ffffff;
    top: -2px;
    left: 0;
    position: absolute;
}

1.jpg
在这里插入图片描述
clock.js


$.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-3.3.1.min.js

复制地址

https://code.jquery.com/jquery-3.3.1.min.js
zhangsan3333
关注
【罗盘时钟（星空版）---使用html,js,css编写。（附全部源代码+效果）】| 面试题：什么是性能优化？列举一些常见的前端性能优化策略；CDN加速，缓存，HTTP请求次数，懒加载
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
07-26 5万+
效果 换个背景： 源代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSDN---追梦者</title> <link rel="stylesheet" href="css/clock.css"> </head> <body> <ul class="clock" id="
抖音罗盘时钟
LIAOJIASONG1024的博客
10-08 6569
***其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧！ HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
罗盘时钟（星空版，全部源代码）.rar
07-26
这是“罗盘时钟”星空版的全部源代码，具体效果我在博客中已经展示了，还不错，可以根据背景，自己随便再去修改哈！需要的朋友可以下载！！！
罗盘时钟 源代码以及全部源文件.rar
12-31
本资源包含一个“罗盘时钟”的全部源代码和所有源文件，需要的朋友可以下载哦！！！！！！！！！！！！！！！！！！！！！11
Js实现炫酷仿抖罗盘时钟------Sestid
Sestid的博客
10-11 7644
样式图：（动态旋转的罗盘，刚打开时还有炫酷的折叠变换） 全部代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
html+css+js实现罗盘时钟
03-18
在“罗盘时钟”项目中，CSS可能包含了设置背景、边框、阴影、旋转和动画效果的规则，以实现罗盘的视觉效果。例如： ```css #compassClock { width: 300px; height: 300px; border-radius: 50%; position: ...
html+css+javascript实现抖音最火的罗盘时钟源码，时钟数字罗盘
06-01
在本项目中，我们探讨的是如何使用HTML、CSS和JavaScript技术来实现一个具有抖音热门特色的罗盘时钟。这个时钟不仅具有独特的视觉效果，而且是动态更新的，能够实时显示当前时间。以下是对实现这一功能所需的关键...
html+css实心罗盘时钟特效
06-28
在创建实心罗盘时钟特效时，CSS可以用来设置时钟的背景、边框、阴影、字体等属性，以及利用`transform`属性实现指针的旋转效果。例如，`transform: rotate(角度)`可以控制元素围绕其原点旋转一定的角度。 3. **...
HTML5七夕情人节表白网页制作【抖音超火的罗盘时钟】HTML+CSS+JavaScript
08-10
本项目使用了CSS3来实现网页布局，利用了 `div` 标签结合CSS实现了DIV+CSS布局，使内容与样式分离，便于后期维护和修改。 #### 2.2 弹性盒子Flexbox布局 可能使用了Flexbox布局技术来实现响应式设计，Flexbox使得...
jQuery+css3实现的时钟罗盘动画效果源码.zip
11-06
在本资源中，"jQuery+css3实现的时钟罗盘动画效果源码.zip" 提供了一个使用 jQuery 和 CSS3 技术构建的时钟罗盘动画效果的源代码示例。这个项目可能是为了帮助开发者学习如何将这两种强大的前端技术结合，创建动态且...
html5罗盘时钟
06-12
html5 罗盘时钟 使用html5开发 需要使用支持html5的浏览器 或者手机等
-:罗盘时钟源码分享
03-22
罗盘时钟源码分享 js，css都写在html中
罗盘时钟HTML源码下载
07-09
罗盘时钟
罗盘时钟.html
07-24
原生js制作一款在抖音上很火的文字罗盘布局时钟代码。带月份、星期、时分秒圆盘时钟，酷炫效果，
时钟罗盘（HTML时钟罗盘代码，老师发的学习案例）
09-18
时钟罗盘（HTML时钟罗盘代码，老师发的学习案例）
罗盘时钟代码
2303_77137340的博客
04-08 1623
接下来就是核心内容了，我们要使用JavaScript来绘制罗盘时钟。以上就是罗盘时钟的基本实现，您可以根据自己的需要进行优化和修改。
罗盘时钟——使用html，js，css编写
m0_57202083的博客
09-03 1万+
罗盘效果.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="style.
罗盘时钟代码(转载)
热门推荐
微电子学与固体电子学-俞驰
12-06 4万+
文件结构如下: $ tree ├── css │└── demo.css ├── hello.html └── js └── demo.js 浏览器打开hello.html即可(文件见附录),效果如下: #----------------------------------------------------------------------------...
html5罗盘时钟.zip
01-14
html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化。动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟
使用HTML创建一个罗盘时钟，结合使用HTML、CSS以及JavaScript
最新发布
09-13
创建一个罗盘时钟涉及到HTML结构的搭建、CSS样式的美化以及JavaScript的功能实现。以下是一个简单的步骤说明： 1. HTML结构： 首先，你需要创建一个基本的HTML结构来定义时钟的界面。你可以使用一个`div`元素来作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值