Html5代码实现动态时钟
以下是一个简单的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函数，以便时钟表盘可以动态更新。
动态时钟表盘效果
