【罗盘时钟（星空版）---使⽤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;
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;html滚动效果代码
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;
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 String(),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)];
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=ar.toString();
for(var i=0;i<y.length;i++){
yearStr+=this.changeZHCN(parseInt(y.charAt(i),10));
}
monthStr=this.changeZHCN(h);
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 () {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。