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函数，以便时钟表盘可以动态更新。