【罗盘时钟（星空版）—使用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('<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

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

代码存放逻辑：
新建一个文件夹，可以起名“罗盘时钟”，然后在里面新建如下文件夹：
再把我上面所发的代码取相应的名字，放里面即可。
背景图自己加哈！

稍后，我也会把这个小特效的所有文件上传到“资源”中，需要的朋友也可以直接从里面下载~~

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/154113.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

【罗盘时钟（星空版）—使用html,js,css编写。（附全部源代码+效果）】[通俗易懂]

目录

效果

源代码

发表回复

【罗盘时钟（星空版）—使用html,js,css编写。（附全部源代码+效果）】[通俗易懂]

目录

效果

源代码

相关推荐

算法-分治法

js获取当前日期时间「建议收藏」

Node.js aitaotu图片批量下载Node.js爬虫1.00版[通俗易懂]

SQLSERVER 存储过程 语法

-bash: ls: command not found 或ifconfig ,su 等命令不能使用

Grizzly开发Echoserver实战

发表回复

SQLSERVER 存储过程语法