HTML5时钟

本示例使用HTML5的canvas标签和Javascript脚本,在页面上模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果:
点击这里查看效果http://www.keleyi.com/keleyi/phtml/html5clock.htm

以下是完整代码,保存到html文件可以查看效果。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>HTML5时钟-柯乐义</title>
</head>
<body>
<div><a href="http://www.keleyi.com" target="_blank">柯乐义</a> <a href="http://www.keleyi.com/a/bjac/4f6d3873d0571805.htm" target="_blank">原文</a>
<h1>HTML5时钟</h1>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">柯乐义提示您,请使用支持HTML5的浏览器,例如Chrome,IE9,IE10,Firefox等。</canvas>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (ctx) {
var timerId;
var frameRate = 60;
function canvObject() {
this.x = 0;
this.y = 0;
this.rotation = 0;
this.borderWidth = 2;
this.borderColor = '#000000';
this.fill = false;
this.fillColor = '#ff0000';
this.update = function () {
if (!this.ctx) throw new Error('柯乐义提示:您没指定ctx对象。');
var ctx = this.ctx
ctx.save();
ctx.lineWidth = this.borderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);
if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);
if (this.draw) this.draw(ctx);
if (this.fill) ctx.fill();
ctx.stroke();
ctx.restore();
}
};
function Line() { };
Line.prototype = new canvObject();
Line.prototype.fill = false;
Line.prototype.start = [0, 0];
Line.prototype.end = [5, 5];
Line.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.moveTo.apply(ctx, this.start);
ctx.lineTo.apply(ctx, this.end);
ctx.closePath();
};

function Circle() { };
Circle.prototype = new canvObject();
Circle.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
ctx.closePath();
};

var circle = new Circle();
circle.ctx = ctx;
circle.x = 100;
circle.y = 100;
circle.radius = 90;
circle.fill = true;
circle.borderWidth = 6;
circle.fillColor = '#ffffff';

var hour = new Line();
hour.ctx = ctx;
hour.x = 100;
hour.y = 100;
hour.borderColor = "#000000";
hour.borderWidth = 10;
hour.rotation = 0;
hour.start = [0, 20];
hour.end = [0, -50];

var minute = new Line();
minute.ctx = ctx;
minute.x = 100;
minute.y = 100;
minute.borderColor = "#333333";
minute.borderWidth = 7;
minute.rotation = 0;
minute.start = [0, 20];
minute.end = [0, -70];

var seconds = new Line();
seconds.ctx = ctx;
seconds.x = 100;
seconds.y = 100;
seconds.borderColor = "#ff0000";
seconds.borderWidth = 4;
seconds.rotation = 0;
seconds.start = [0, 20];
seconds.end = [0, -80];

var center = new Circle();
center.ctx = ctx;
center.x = 100;
center.y = 100;
center.radius = 5;
center.fill = true;
center.borderColor = 'orange';

for (var i = 0, ls = [], cache; i < 12; i++) {
cache = ls[i] = new Line();
cache.ctx = ctx;
cache.x = 100;
cache.y = 100;
cache.borderColor = "orange";
cache.borderWidth = 2;
cache.rotation = i * 30;
cache.start = [0, -70];
cache.end = [0, -80];
}

timerId = setInterval(function () {
// 清除画布
ctx.clearRect(0, 0, 200, 200);
// 填充背景色
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 200, 200);
// 表盘
circle.update();
// 刻度
for (var i = 0; cache = ls[i++]; ) cache.update();
// 时针
hour.rotation = (new Date()).getHours() * 30;
hour.update();
// 分针
minute.rotation = (new Date()).getMinutes() * 6;
minute.update();
// 秒针
seconds.rotation = (new Date()).getSeconds() * 6;
seconds.update();
// 中心圆
center.update();
}, (1000 / frameRate) | 0);
} else {
alert('柯乐义提示:您的浏览器不支持HTML5无法预览.');
}
</script>
</body>
</html>


本文转载自柯乐义http://www.keleyi.com/a/bjac/4f6d3873d0571805.htm
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5网页动态时钟源码可以使用JavaScript和CSS来实现。下面是一个简单的示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="clock"> <div id="hour" class="hand"></div> <div id="minute" class="hand"></div> <div id="second" class="hand"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码(style.css): ```css .clock { width: 200px; height: 200px; background-color: #f1f1f1; border-radius: 50%; position: relative; margin: 0 auto; margin-top: 100px; overflow: hidden; } .hand { background-color: #333; position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; } #hour { width: 8px; height: 60px; margin-left: -4px; } #minute { width: 4px; height: 80px; margin-left: -2px; } #second { width: 2px; height: 100px; margin-left: -1px; } ``` JavaScript代码(script.js): ```javascript function rotateClockHands() { var now = new Date(); var hourAngle = now.getHours() % 12 * 30 + now.getMinutes() / 2; var minuteAngle = now.getMinutes() * 6; var secondAngle = now.getSeconds() * 6; document.getElementById('hour').style.transform = 'rotate(' + hourAngle + 'deg)'; document.getElementById('minute').style.transform = 'rotate(' + minuteAngle + 'deg)'; document.getElementById('second').style.transform = 'rotate(' + secondAngle + 'deg)'; } setInterval(rotateClockHands, 1000); ``` 这段代码创建一个200x200像素的圆形时钟,并用JavaScript动态旋转时、分、秒指针。CSS用于设置时钟的样式,JavaScript负责计算当前时间并将指针旋转到正确的位置。setInterval()函数用于每秒钟更新一次指针的旋转角度,使时钟指针动起来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值