用h5和原生js做的漂亮的时钟

用h5和原生js做的时钟

<div class="clock">
<div class="mask"></div>
</div>

body{background:#FFD741}
.clock{
width:300px;height:300px;
border:20px solid #353D46;
background:#252C34;
border-radius: 50%;
top:0;left:0;right:0;bottom:0;
position:absolute;
margin:auto;
}
.mask{
background: #EE6C3D;
width:20px;height:20px;
border-radius: 50%;
top:0;left:0;right:0;bottom:0;
position:absolute;
margin:auto;
z-index: 1;
}

window.onload=function(){
var clock=document.getElementsByTagName("div")[0];
//画刻度
function drawMark(){
var w,h;
for(var i=0;i<60;i++){
var div=document.createElement("div");

if(i%5==0){
var span=document.createElement("span");
w=4;h=12
}else{
w=4;h=4
}
div.style.cssText="width:"+w+"px;height:"+h+"px;background:#DEE2EB;position:absolute;border-radius:2px;top:0;left:0;transform:translateX("+(300-w)/2+"px) rotate("+i*6+"deg);transform-origin:"+(w/2)+"px 150px"
clock.appendChild(div)
span.style.cssText="width:10px;height:10px;font-size:24px;color:#DEE2EB;position:absolute;border-radius:2px;top:10px;left:0;transform:translateX(145px) rotate("+(i+.5)*6+"deg);transform-origin:5px 140px"
span.innerHTML=(i+1)/5
clock.appendChild(span)
}
}
//画指针
function drawPointer(w,h,c,a){
var w=w||6;
var h=h||50;
var c=c||"#999";
var a=a||10
var div=document.createElement("div");
div.style.cssText="width:"+w+"px;height:"+h+"px;background:"+c+";position:absolute;left:"+(300/2)+"px;top:"+(150-h/2)+"px;border-radius:5px;transform:rotate("+a+"deg);transform-origin:left center"
clock.appendChild(div);
return div;
}
drawMark();
var time=new Date();
var h=drawPointer(75,8,"#fff",time.getHours()*30+time.getMinutes()*6/12-90);
var m=drawPointer(100,6,"#fff",time.getMinutes()*6-90);
var s=drawPointer(130,4,"#EE6C3D",time.getSeconds()*6-90);
setInterval(function(){
var time=new Date();
h.style.transform="rotate("+(time.getHours()*30+time.getMinutes()*6/12-90)+"deg)";
m.style.transform="rotate("+(time.getMinutes()*6-90)+"deg)"
s.style.transform="rotate("+(time.getSeconds()*6-90)+"deg)"
},1000)

var hours=document.getElementsByTagName("select")[0].value;
var minutes=document.getElementsByTagName("select")[1].value;
var seconds=document.getElementsByTagName("select")[2].value;
function setClock(){
var time = new Date();
var th = time.getHours();
var tm = time.getMinutes();
var ts = time.getSeconds();
var d1=(th>=hours)&&(tm>=minutes)&&(ts>=seconds);
var d2=(th>=hours)&&(tm>=minutes);
var d3=th>hours;
if(d1||d2||d3){
clock.style.animation="shake 1s linear alternate infinite running"
}else{
clock.style.animation=""
}
}
}