css钟表效果,css3实现钟表效果的方法

window.onload = function(){

var oUl = document.getElementById("tickBox");

var oStyle = document.getElementById("style");

var liStr = "";

var styleStr = "";

for(var i=0;i<60;i++){

styleStr += '.clock ul li:nth-of-type('+(i+1)+'){transform: rotate('+i*6+'deg);}';

liStr += '

';

}

oStyle.innerHTML += styleStr;

oUl.innerHTML = liStr;

var oHour = document.getElementById("hour");

var oMin = document.getElementById("min");

var oSec = document.getElementById("sec");

function getTime(){

var timer = new Date();

var sec = timer.getSeconds();

var min = timer.getMinutes();

var hour = timer.getHours();

var tranS = sec*360/60;

var tranM = (min+sec/60)*360/60;

var tranH = (hour + min/60)*360/12;

oSec.style.transform = 'rotate('+tranS+'deg) translateZ(-1px)';

oMin.style.transform = 'rotate('+tranM+'deg) translateZ(-1px)';

oHour.style.transform = 'rotate('+tranH+'deg) translateZ(-1px)';

}

setInterval(getTime,1000);

getTime();

}