效果圖：
知識點：
1、transform-origin
2、弧度計算公式 (2*Math.PI/360)*角度
3、表盤數字計算方法
x=r(1+Math.cos(弧度))；
y=r(1+math.sin(弧度))；
完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*all tip*/ *{ padding:0; margin: 0; } ol,ul{ list-style: none; } .clock{ width:200px; height:200px; margin: 50px auto; background: #292a38; border-radius:50%; position: relative; } /*表盤數字*/ .clocknum{ position: relative; width:150px; height: 150px; top:50%; left:50%; transform: translate(-50%,-50%); } .clocknum li{ position: absolute; top:50%; left:50%; font-size:15px; transform: translate(-50%,-50%); color: #fff; transform-origin:left center; } /*刻度*/ .line-hour li, .line-min li{ position: absolute; top:50%; left:50%; background: #fff; transform-origin:left center; /*transform-origin設置旋轉元素的基點位置 * transform前li的左側頂點是時鍾的中心 * 如果不設置transform-origin 默認是center center 則是以偏移前li的中心點而非左側頂點進行旋轉。整個表盤會偏移 * */ } .line-hour li{ width:10px; height:2px; } .line-min li{ width:5px; height:2px; } /*指針*/ .point li{ position: absolute; top:50%; left:50%; background: #fff; transform-origin:left center; } .point li.circle{ width:10px; height:10px; border-radius: 50%; transform: translate(-50%,-50%); } .point li.hour{ width:45px; height:3px; margin-top:-1; } .point li.min{ width:60px; height:2px; margin-top:-1; } .point li.sec{ width:80px; height:1px; margin-top:-1; } </style> </head> <body> <div class="clock"> <ul class="line-min"></ul> <ul class="line-hour"></ul> <ol class="clocknum"></ol> <ul class="point"> <li class="hour"></li> <li class="min"></li> <li class="sec"></li> <li class="circle"></li> </ul> </div> </body> <script src="js/jquery.min.js" ></script> <script> //畫刻度 drawline($(".line-min"),60,85); drawline($(".line-hour"),12,80); function drawline(wrap,num,translate){ var gap=360/num; for(var i=0;i<num;i++) { var $li=$("<li/>").css({ "transform":"rotate("+gap*i+"deg) translate("+translate+"px,50%)" }); wrap.append($li); } } //畫表盤數字 drawnumber($('.clocknum'),12); function drawnumber(wrap,num){ var r=$(".clocknum").width()/2;//半徑 for(var i=1;i<num+1;i++) { var radian=(2*Math.PI/360)*(i*30-90);//通過角度求弧度 i*30-90是角度 myX=r*(1+Math.cos(radian)); myY=r*(1+Math.sin(radian)); var $li=$("<li>"+i+"</li>").css({ "left":myX+"px", "top":myY+"px", }); wrap.append($li); } } //畫指針 setInterval(drawpoint,1000); var time=new Date(); var sec=time.getSeconds(); var min=time.getMinutes(); var hour=time.getHours(); var subsec=(360/60);//秒針1s旋轉6度 var submin=(360/3600);//分針1s旋轉0.1度 var subhour=(360/12/3600);//時針1s旋轉360/12/3600度 var degsec=(subsec*sec-90)%360;//(6*s-90)%360 var degmin=(submin*(min*60+sec)-90)%360; //(0.1*(m*60+s)-90)360% var deghour=(subhour*(hour*3600+min*60+sec)-90)%360; //防止超過360度的情況 function drawpoint(){ degsec+=(360/60); degmin+=(360/3600); deghour+=(360/12/3600); degsec=degsec>=360?0:degsec; degmin=degmin>=360?0:degmin; deghour=deghour>=360?0:deghour; $(".point li.sec").css({ "transform":"rotate("+degsec+"deg)" }); $(".point li.min").css({ "transform":"rotate("+degmin+"deg)" }); $(".point li.hour").css({ "transform":"rotate("+deghour+"deg)" }); } </script> </html>