【罗盘时钟(星空版)---使用html,js,css编写。(附全部源代码+效果)】

目录

    • 效果
    • 源代码

效果



换个背景:

源代码

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="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>

clock.css

body{
    font-size: 14px;
    color: #ffffff;
    font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
    background: url(../image/bg2.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;
}

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('
  • '+(yearStr+'年'+monthStr+'月'+dayStr+'日')+'
  • '
    ); } }; /* 设置小时 */ HL.setHour=function(){ var str='',rotateArr=[]; for(var i=1;i<=24;i++){ rotateArr.push(r=360/24*(i-1)*-1); str+='
    '+(this.changeZHCN(i))+'时
    '
    ; } this.$el.append('
  • '+str+'
  • '
    ); 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+='
    '+(this.changeZHCN(i))+'分
    '
    ; } this.$el.append('
  • '+str+'
  • '
    ); 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+='
    '+(this.changeZHCN(i))+'秒
    '
    ; } this.$el.append('
  • '+str+'
  • '
    ); 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

    这属于一个小的插件,也类似于包,代码过长,这里就不放了。。。
    大家可以百度下载,很容易找到~~
    

    代码存放逻辑
    新建一个文件夹,可以起名“罗盘时钟”,然后在里面新建如下文件夹:
    再把我上面所发的代码取相应的名字,放里面即可。
    背景图自己加哈!
    【罗盘时钟(星空版)---使用html,js,css编写。(附全部源代码+效果)】_第1张图片
    稍后,我也会把这个小特效的所有文件上传到“资源”中,需要的朋友也可以直接从里面下载~~

    你可能感兴趣的:(罗盘时钟,html,css,js,星空版罗盘时钟)