![[JavaScript技术]JavaScript 简单的钟表](https://search.52zhanxing.com/aiimages/[JavaScript技术]JavaScript 简单的钟表.png)
操作方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> div{ margin:0px auto; } </style> </head> <body> <div style="margin-top:100px;width:450px;"> <canvas id="drawing" width="320" height="240"> Your browser does not support the canvas element.</canvas> </div> </body> <script type="text/javascript"> function currentClock(){ var dt = new Date(); var minutes = dt.getMinutes(); var hours = dt.getHours(); var seconds = dt.getSeconds(); var _basicRadian = 2 * Math.PI/360; /** 角度是以分针指向12时计算 **/ var _basicSecondAngle = 6; var _basicMinuteAngle = 6; //一分钟的角度 var _basicHourAngle = 30; var _basicHourPerAngle = 0.5; //分针移动一分钟时间移动的角度 360/60 = 30/x x= 0.5 var _basicMinutesPerAngle = 0.1; // 秒针移动一秒，分针移动的角度 360/6 = 6/x x = 0.1 var _secondsAngle = seconds * _basicSecondAngle; var _minutesAngle = minutes * _basicMinuteAngle + seconds * _basicMinutesPerAngle; //当前分钟的角度 var _hoursAngle = hours * _basicHourAngle + minutes * _basicHourPerAngle; //秒针坐标 var secondsPointX = Math.sin(_secondsAngle * _basicRadian) * 85 + 100; var secondsPointY = 100 - Math.cos(_secondsAngle * _basicRadian) * 85; //分针坐标 var minutesPointX = Math.sin(_minutesAngle * _basicRadian) * 77 + 100; var minutesPointY = 100 - Math.cos(_minutesAngle * _basicRadian) * 77; //时针坐标 var hoursPointX = Math.sin(_hoursAngle * _basicRadian) * 70 + 100; var hoursPointY = 100 - Math.cos(_hoursAngle * _basicRadian) * 70; //document.write("X:" + minutesPointX + "------Y:" + minutesPointY); var drawing = document.getElementById("drawing"); /*Mozilla 支持*/ if(drawing.getContext){ var context = drawing.getContext("2d"); } context.clearRect(0, 0, 300, 300); context.beginPath(); context.lineWidth = "2"; //绘制外圆 context.arc(100, 100, 99, 0, 2 * Math.PI, false); //绘制内圆 context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2 * Math.PI, false); context.save(); context.stroke(); context.moveTo(104, 100); context.fillStyle = "rgba(0, 0, 255, 0.5)"; context.arc(100, 100, 4, 0, 2 * Math.PI, false); //绘制秒针 context.moveTo(100, 100); context.lineTo(secondsPointX, secondsPointY); context.lineCap = "square"; //绘制分针 context.moveTo(100, 100); context.lineTo(minutesPointX, minutesPointY); context.save(); context.stroke(); //绘制时针 context.beginPath(); context.moveTo(100, 100); context.lineTo(hoursPointX, hoursPointY); context.save(); context.stroke(); context.font = "bold 10px Arial"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("12", 100, 12); context.fillText("6", 100, 187); context.fillText("9", 12, 100); context.fillText("3", 187, 100); context.fillText("1", 100+88/2, 100 - Math.sqrt(88*88-44*44)); context.fillText("2", 100 + Math.sqrt(88*88-44*44), 100-88/2); context.fillText("4", 100 + Math.sqrt(88*88-44*44), 100+88/2); context.fillText("5", 100+88/2, 100 + Math.sqrt(88*88-44*44)); context.fillText("7", 100-88/2, 100 + Math.sqrt(88*88-44*44)); context.fillText("8", 100 - Math.sqrt(88*88-44*44), 100+88/2); context.fillText("10", 100 - Math.sqrt(88*88-44*44), 100-88/2); context.fillText("11", 100-88/2, 100 - Math.sqrt(88*88-44*44)); context.save(); context.stroke(); } function showTime(){ currentClock(); setTimeout(showTime, 1000); } showTime(); </script> </html>