以下是一个简单的HTML5动态时钟的示例：
<!DOCTYPE html> <html> <head> <title>HTML5动态时钟</title> <style> body { margin: 0; padding: 0; background-color: #000; color: #fff; font-size: 5em; font-family: Arial, sans-serif; text-align: center; } </style> </head> <body> <script> function updateTime() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); hours = (hours < 10 ? "0" : "") + hours; minutes = (minutes < 10 ? "0" : "") + minutes; seconds = (seconds < 10 ? "0" : "") + seconds; var timeString = hours + ":" + minutes + ":" + seconds; document.getElementById("clock").innerHTML = timeString; } setInterval(updateTime, 1000); </script> <div id="clock"></div> </body> </html>
该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。
动态时钟效果
以下是一个HTML5动态时钟表盘的示例代码：
<!DOCTYPE html> <html> <head> <title>HTML5动态时钟表盘</title> <style> body { margin: 0; padding: 0; background-color: #000; color: #fff; font-family: Arial, sans-serif; text-align: center; } canvas { display: block; margin: 0 auto; } </style> </head> <body> <canvas id="clock" width="400" height="400"></canvas> <script> var canvas = document.getElementById("clock"); var context = canvas.getContext("2d"); var radius = canvas.height / 2; context.translate(radius, radius); radius = radius * 0.90; setInterval(drawClock, 1000); function drawClock() { drawFace(context, radius); drawNumbers(context, radius); drawTime(context, radius); } function drawFace(context, radius) { var grad; context.beginPath(); context.arc(0, 0, radius, 0, 2*Math.PI); context.fillStyle = '#333'; context.fill(); grad = context.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#fff'); grad.addColorStop(0.5, '#333'); grad.addColorStop(1, '#fff'); context.strokeStyle = grad; context.lineWidth = radius*0.1; context.stroke(); context.beginPath(); context.arc(0, 0, radius*0.1, 0, 2*Math.PI); context.fillStyle = '#fff'; context.fill(); } function drawNumbers(context, radius) { var ang; var num; context.font = radius*0.15 + "px arial"; context.textBaseline="middle"; context.textAlign="center"; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; context.rotate(ang); context.translate(0, -radius*0.85); context.rotate(-ang); context.fillText(num.toString(), 0, 0); context.rotate(ang); context.translate(0, radius*0.85); context.rotate(-ang); } } function drawTime(context, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); // 小时 hour=hour%12; hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(context, hour, radius*0.5, radius*0.07); // 分钟 minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(context, minute, radius*0.8, radius*0.07); // 秒钟 second=(second*Math.PI/30); drawHand(context, second, radius*0.9, radius*0.02); } function drawHand(context, pos, length, width) { context.beginPath(); context.lineWidth = width; context.lineCap = "round"; context.moveTo(0,0); context.rotate(pos); context.lineTo(0, -length); context.stroke(); context.rotate(-pos); } </script> </body> </html>
该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。CSS样式用于设置页面的背景颜色，文本颜色，字体样式和文本对齐方式。JavaScript代码用于画出时钟表盘，包括表盘的外圆，刻度线，数字和时、分、秒针。setInterval函数用于每秒钟调用一次drawClock函数，以便时钟表盘可以动态更新。
动态时钟表盘效果
