CSS3实现一个实时钟表的功能

2018年9月6日22:58:06 5 阅读(4,558)

这两天一直因为在webstorm中安装依赖而脑壳疼，之前用的npm来安装，后来嫌速度慢，所以用了淘宝的国内镜像，然后用cnpm来安装，用了之后发现没有改善，而且更卡了，cpu有时候都可以跑到100%，能亲身感受到小风扇转的更快了，呼呼的~那我还是换回npm吧，虽然速度慢点，但是也不至于卡死=。=

:-( 不想这些事了，转移一下注意力吧，闲着也是闲着，就来做一个小东西来玩一下，于是就想到了钟表，实现的逻辑也不复杂，调用setInterval方法，每隔1s执行一次函数，然后时间转换为指针旋转度数。

效果图：

CSS3实现一个实时钟表的功能

css代码：

<style id="css">
#box{ width:200px;height:200px;border:1px solid black;position:relative;border-radius:50%;margin:100px auto;background-image: url("");background-size: cover;}
#list{ list-style:none;position:relative;height:100%;margin:0;padding:0; }
#list li{ width:1px;height:6px;background:#000;position:absolute;left:99px;top:0;transform-origin:center 100px;-moz-transform-origin:center 100px;-webkit-transform-origin:center 100px;-o-transform-origin:center 100px; }
#list li:nth-child(5n+1){ width:2px;height:10px; }
#ico,#hour,#min,#sec{ position:absolute;background:#000; }
#ico{ width:10px;height:10px;border-radius:50%;left:95px;top:95px; }
#hour{ width:4px;height:50px;left:98px;top:50px;transform-origin:bottombottom;-moz-transform-origin:bottombottom;-webkit-transform-origin:bottombottom;-o-transform-origin:bottombottom; }
#min{ width:2px;height:70px;left:99px;top:30px;background:#300;transform-origin:bottombottom;-moz-transform-origin:bottombottom;-webkit-transform-origin:bottombottom;-o-transform-origin:bottombottom; }
#sec{ width:2px;height:90px;left:99px;top:10px;background:red;transform-origin:bottombottom;-moz-transform-origin:bottombottom;-webkit-transform-origin:bottombottom;-o-transform-origin:bottombottom; }
#number_time { text-align: center;}
</style>

window.onload=function(){
var list=document.getElementById("list");
var hour=document.getElementById("hour");
var mins=document.getElementById("min");
var sec=document.getElementById("sec");
var css=document.getElementById("css");
var lis="";
for( var i=0;i<60;i++ ){
lis+=" <li></li> ";
css.innerHTML+="#list li:nth-of-type("+(i+1)+"){ transform:rotate( "+i*6+"deg );-moz-transform:rotate( "+i*6+"deg );-webkit-transform:rotate( "+i*6+"deg );-o-transform:rotate( "+i*6+"deg ); }";
}
list.innerHTML=lis;
toTime();
setInterval( toTime,1000 );
setInterval( toTime2,1000 );
function toTime(){
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
hour.style.WebkitTransform=" rotate( "+ h*30 +"deg ) ";
mins.style.WebkitTransform=" rotate( "+ m*6 +"deg ) ";
sec.style.WebkitTransform=" rotate( "+ s*6 +"deg ) ";
}
function toTime2() {
var today = new Date();
var w; /*星期几*/
switch(today.getUTCDay()){
case 1:
w="一";
break;
case 2:
w="二";
break;
case 3:
w="三";
break;
case 4:
w="四";
break;
case 5:
w="五";
break;
case 6:
w="六";
break;
case 7:
w="天";
break;
}
var d = today.getUTCFullYear()+"年"
+(today.getUTCMonth()+1)+"月"+today.getUTCDate()+"日"
+" 星期"+w;
var t = today.toLocaleTimeString();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
document.getElementById("number_time").innerHTML = d+"<br>"+t;
}
}