时钟轮盘自定义背景

最新推荐文章于 2024-07-19 06:13:09 发布

小政爱学习！

最新推荐文章于 2024-07-19 06:13:09 发布

阅读量83

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/m0_58361435/article/details/134378652

版权

时钟轮盘实现的方式有很多种，我这里用的是jQuery.min.js。废话不多说，直接上代码

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <ul class="clock" id="helang-clock">
    <hr>
  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./index.js"></script>
  <script type="text/javascript">
    $("#helang-clock").clock();
  </script>
</body>
</html>

css部分：

body{
  font-size: 14px;
  color: #ffffff;
  font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
  background: url(https://t7.baidu.com/it/u=49543540,1854823208&fm=193&f=GIF) 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;
}

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