利用了Canvas制作的，可以转呀。
示意图如下：
<!DOCTYPE html><html><head><meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /><title> 网页时钟 </title></head><body><h2> Web时钟 </h2><canvas id = "hello" width = "400" height = "400"style = "border:1px solid black"> </canvas><script languagetype = "text/javascript">var myCavas = document.getElementById('hello');var c = myCavas.getContext('2d');function clock() {c.clearRect(0, 0, 400, 400);//获取当前时间var data = new Date();//获取秒var sec = data.getSeconds();//获取分钟var min = data.getMinutes();//获取小时var hour = data.getHours();c.save();c.translate(200, 200);c.rotate(-Math.PI/2);//分针刻度线for (var i = 0; i < 60; i++) {//画60个刻度线c.beginPath();c.strokeStyle = "yellowgreen";c.lineWidth = 5;c.moveTo(117, 0);c.lineTo(120, 0);c.stroke();//每6deg画一个分钟刻度线c.rotate(Math.PI/30);c.closePath();}//时钟刻度线for (var i = 0; i < 12; i++) {//画60个刻度线c.beginPath();c.strokeStyle = "green";c.lineWidth = 8;c.moveTo(100, 0);c.lineTo(120, 0);c.stroke();//每6deg画一个分钟刻度线c.rotate(Math.PI/6);c.closePath();}//外表盘c.beginPath();c.strokeStyle = "pink";c.arc(0, 0, 145, 0, Math.PI*2);c.lineWidth = 12;c.stroke();c.closePath();//画时针hour = hour > 12 ? hour-12 : hour;//console.log(hour);c.beginPath();c.save();//设置旋转角度，参数是弧度，角度0-360 弧度角度*Math.PI/180c.rotate(Math.PI/6*hour + Math.PI/6*min/60 + Math.PI/6*sec/3600);c.strokeStyle = "yellowgreen";c.lineWidth = 4;c.moveTo(-20, 0);c.lineTo(50, 0);c.stroke();c.restore();c.closePath();//画分针//console.log(min);c.beginPath();c.save();c.rotate(Math.PI/30*min + Math.PI/30*sec/60);c.strokeStyle = "springgreen";c.lineWidth = 3;c.moveTo(-30, 0);c.lineTo(70, 0);c.stroke();c.restore();c.closePath();//画秒针c.beginPath();c.save();c.rotate(Math.PI/30*sec);c.strokeStyle = "red";c.lineWidth = 2;c.moveTo(-40, 0);c.lineTo(120, 0);c.stroke();c.restore();c.closePath();c.restore();}clock();setInterval(clock, 1000);</script></body></html>
