制作好的效果如下：
表盘、刻度和数字全都是用html+css完成的。
html+css代码如下：
圆形时钟 12
6
1
7
2
8
3
9
4
10
5
11
js代码如下:
var minute;var hour;var second;function createClock(){ var circle=document.getElementById("div1"); var smallcircle=document.getElementById("div2"); var angle=0; for(var i=0;i<30;i++){ var clockPanel=document.createElement("div"); //clockPanel.setAttribute("width","500px"); //clockPanel.style.borderTop="1px solid black" clockPanel.setAttribute("class","clockPanel"); circle.appendChild(clockPanel); circle.insertBefore(clockPanel,smallcircle); clockPanel.style.transform="rotate("+angle+"deg)"; angle+=6; if(i%5==0){ clockPanel.style.border="2px solid black"; } }}function getDate(){ var date=new Date(); hour=date.getHours(); minute=date.getMinutes(); second=date.getSeconds(); }var angle1=6;var angle2=6;var angle3=6;function secondPointFresh(){ //alert("dhf"); //alert(secondPoint.style.transform); second++; if(second==60){ second=0; minute++; if(minute==60){ minute=0; hour++; if(hour==12) hour=0; } } angle1=second*6; var secondPoint=document.getElementById("secondPoint"); secondPoint.style.transform="rotate("+angle1+"deg)"; angle2=(minute*6); var minutePoint=document.getElementById("minutePoint"); minutePoint.style.transform="rotate("+angle2+"deg)"; angle3=((hour%12)*30)+(minute*0.5); var hourPoint=document.getElementById("hourPoint"); hourPoint.style.transform="rotate("+angle3+"deg)";}createClock();getDate();secondPointFresh();setInterval("secondPointFresh()",1000);