java编写实时时钟,h5实现实时时钟

*{

margin: 0px;

padding: 0px;

}

.clock{

width: 200px;

height: 200px;

border: 1px solid #000;

border-radius: 50%;

position: relative;

margin: 20px;

background-size: 100%;

}

.clock .hour{

width: 10px;

height: 70px;

background: orange;

position: absolute;

left: 95px;

top: 30px;

/*animation: sec 86400s infinite;*/

}

.clock .minute{

width: 6px;

height: 80px;

background: deepskyblue;

position: absolute;

left: 97px;

top: 20px;

/*animation: sec 3600s infinite;*/

}

.clock .second{

width: 2px;

height: 90px;

background: red;

position: absolute;

left: 99px;

top: 10px;

/*animation: sec 60s infinite;*/

}

@keyframes sec{

0%{transform-origin: center bottom;transform: rotate(0deg);}

100%{transform-origin: center bottom;transform: rotate(360deg);}

}

function fn(){

var myDate=new Date;

var h=myDate.getHours();

var m=myDate.getMinutes();

var s=myDate.getSeconds();

$(".clock .hour").css({"transform-origin":" center bottom","transform":"rotate("+30*h+"deg)"});

$(".clock .minute").css({"transform-origin":" center bottom","transform":"rotate("+6*m+"deg)"});

$(".clock .second").css({"transform-origin":" center bottom","transform":"rotate("+6*s+"deg)"});

}

fn();

setInterval(fn,1000);