【浪漫 罗盘时钟 Js、css实现（附源代码） 美化版本】

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: yellow;

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({

  最后

  全网独播-价值千万金融项目前端架构实战

  

  从两道网易面试题-分析JavaScript底层机制

  

  RESTful架构在Nodejs下的最佳实践

  

  一线互联网企业如何初始化项目-做一个自己的vue-cli

  

  思维无价，看我用Nodejs实现MVC

  

  代码优雅的秘诀-用观察者模式深度解耦模块

  

  前端高级实战，如何封装属于自己的JS库

  

  VUE组件库级组件封装-高复用弹窗组件