<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { background-color: skyblue; } #clock { background-color: gray; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <canvas id="clock" width="500" height="500"></canvas> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script type="text/javascript"> var $clock = $('#clock'); var clock = $('#clock')[0]; if (clock.getContext) { var ctx = clock.getContext('2d'); setInterval(function(){ ctx.clearRect(0,0,$clock.width(),$clock.height()); move() },1000) function move(){ ctx.save(); // 公共样式 ctx.translate(250, 250); ctx.rotate(-90 * Math.PI / 180); ctx.lineWidth = 8; ctx.strokeStyle = "black"; ctx.lineCap = "round"; ctx.beginPath(); // 最外层圆盘 ctx.save(); ctx.lineWidth = 14; ctx.strokeStyle = '#325FA2'; ctx.beginPath(); ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180, false); ctx.stroke(); ctx.restore(); // 时针刻度 ctx.save(); for (var i = 0; i < 12; i++) { ctx.rotate(30 * Math.PI / 180) ctx.beginPath(); ctx.moveTo(100, 0); ctx.lineTo(120, 0); ctx.stroke() } ctx.restore(); // 分针刻度 ctx.save(); for (var i = 0; i < 60; i++) { if (i % 5 != 0) { ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(117, 0); ctx.lineTo(120, 0); ctx.stroke() } ctx.rotate(6 * Math.PI / 180) } ctx.restore(); // 获取时间 var date = new Date(); var s = date.getSeconds(); var m = date.getMinutes()+s/60; var h = date.getHours()+m/60; // 时针 ctx.save(); ctx.lineWidth = 14; ctx.beginPath(); ctx.rotate(h*30*Math.PI/180) ctx.moveTo(-20,0); ctx.lineTo(80,0); ctx.stroke(); ctx.restore(); // 分针 ctx.save(); ctx.lineWidth = 10; ctx.beginPath(); ctx.rotate(m*6*Math.PI/180) ctx.moveTo(-28,0); ctx.lineTo(112,0); ctx.stroke(); ctx.restore(); // 秒针 ctx.save(); ctx.lineWidth = 6; ctx.strokeStyle = '#D40000'; ctx.beginPath(); ctx.rotate(s*6*Math.PI/180) ctx.moveTo(-30,0); ctx.lineTo(83,0); ctx.stroke(); ctx.restore(); // 中心圆盘 ctx.save(); ctx.fillStyle = '#D40000'; ctx.beginPath(); ctx.arc(0,0,10,0,360*Math.PI/180); ctx.fill(); ctx.restore(); // 秒针上的空心圆 ctx.save(); ctx.lineWidth = 6; ctx.strokeStyle = '#D40000'; ctx.beginPath(); ctx.rotate(s*6*Math.PI/180) ctx.arc(96,0,10,0,360*Math.PI/180); ctx.stroke(); ctx.restore(); ctx.restore(); } } </script> </html>
