HTML5时钟-js教程-PHP中文网

HTML5时钟

巴扎黑

发布： 2016-11-25 14:28:10

原创

1123人浏览过

<!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>