`

HTML5时钟

html5javascript 
阅读更多
本示例使用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
分享到：
| Eclipse：添加文档注释快捷键 修改快捷键 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯Html5时钟

    【纯Html5时钟】是一种基于HTML5技术构建的网页时钟，其设计灵感来源于苹果产品的界面风格，因此具有简洁、优雅的特点。这种时钟专为支持Webkit内核的浏览器设计，例如Chrome、Safari等，能提供流畅且实时的时钟显示...

    简洁白色的HTML5时钟代码.zip

    【简洁白色的HTML5时钟代码】是一个以HTML5为基础，结合JavaScript实现的在线实时时钟效果，其设计风格以白色为主，简洁而不失功能性。这个时钟代码的主要目标是为网页提供一个直观的时间显示功能，它能动态地更新...

    简洁美观的Html5时钟

    【Html5时钟】是一种利用HTML5、CSS3和JavaScript技术构建的实时显示时间的网页应用。这个项目对于初学者来说是一个很好的实践案例，因为它涵盖了Web前端开发的基础知识，包括结构化标签、样式表现和动态功能。下面...

    HTML5时钟显示

    HTML5时钟显示是一种利用HTML5的Canvas API创建的动态时间展示方式，它不仅展示了HTML5的现代化功能，还体现了Web开发中交互性和实时性的增强。在这个项目中，开发者使用了Canvas元素，这是一种在网页上绘制图形的...

    html5时钟代码

    HTML5时钟代码是一个网页应用，它利用HTML5的特性，结合CSS3和JavaScript来创建一个实时显示时间的动态时钟。这个应用的核心是通过JavaScript获取当前系统时间，并将其更新到页面上，使得用户可以直观地看到当前的...

    html5数字时钟_html5电子时钟_html5时钟效果代码

    HTML5数字时钟是一种利用HTML5的Canvas API和JavaScript编程技术来实现的动态时钟效果。这个技术在网页设计和开发中广泛应用，为用户提供了一种实时、直观的时间展示方式，无需依赖任何外部插件或服务器端的数据更新...

    jQuery html5时钟插件制作走动的时钟效果

    在本文中，我们将深入探讨如何使用jQuery和HTML5来创建一个动态走动的时钟插件。这个插件能够实时显示当前时间，并且通过CSS3的动画效果为用户带来更直观、更生动的视觉体验。 首先，让我们了解基础概念： **...

    jquery+html5时钟插件clock

    《jQuery + HTML5 时钟插件：clock详解》 在网页开发中，实时显示时间是一种常见的需求，jQuery 和 HTML5 的结合为实现这一功能提供了强大的工具。"jquery+html5时钟插件clock"正是这样一款利用这两种技术构建的...

    html5 时钟

    HTML5时钟是一种利用HTML5的新特性，特别是Canvas API，来创建动态、交互式的时钟显示。Canvas是HTML5中的一个绘图元素，允许开发者在网页上进行2D图形的绘制，无需借助Flash或其他插件。这个“html5时钟”项目可能...

    html5时钟（Canvas）

    基于html5canvas技术绘制clock时钟，封装与一个js库， new Clock(width,height,id) width时钟宽度 height时钟高度 id定位于那个html容器（div的id）

    获取本地时间的Html5时钟特效.zip

    在本项目"获取本地时间的Html5时钟特效"中，我们将探讨如何利用HTML5、jQuery、JavaScript和CSS来实现一个实时显示本地时间的时钟特效。 首先，HTML5是基础，它的`&lt;canvas&gt;`元素提供了画布，可以用于绘制图形，包括...

    圆形表盘高亮的HTML5时钟.rar

    这个名为"圆形表盘高亮的HTML5时钟.rar"的压缩包文件包含了一个使用HTML5和CSS3技术实现的动态圆形时钟的源代码。这个网页时钟设计独特，表盘采用圆形布局，具有高亮和闪烁的发光效果，为用户提供了视觉上的吸引力。...

    带表盘和数字刻度HTML5时钟代码

    HTML5时钟是一种利用网页技术实现的实时时间显示工具，主要通过HTML5的Canvas API来绘制动态的时钟界面。这个特定的时钟代码包含一个带有表盘和数字刻度的交互式设计，并且提供了三种内置的主题供用户选择。下面我们...

    html5时钟效果

    html5实现时钟效果的插件，可以通过修改参数，修改样式

    纯html5绘制的本地时钟特效.zip

    【纯HTML5绘制的本地时钟特效】是一个利用HTML5技术实现的创新视觉效果，它展示了HTML5的强大功能和灵活性。HTML5作为一种先进的标记语言，不仅增强了网页的结构化能力，还提供了丰富的媒体支持和离线存储等功能。在...

    HTML5的时钟实例（初级者）

    在这个“HTML5的时钟实例”中，初级学习者可以了解到如何利用HTML5的Canvas API创建一个实时更新的时钟。 首先，让我们详细探讨HTML5的Canvas API。Canvas是一个二维绘图上下文，允许开发者通过JavaScript来绘制...

    HTML5 简单的动画 数字时钟

    在这个"HTML5简单的动画数字时钟"项目中，我们主要关注的是HTML5的Canvas元素及其在创建动态视觉效果方面的应用。 Canvas是HTML5中的一个画布标签，它允许开发者通过JavaScript来绘制图形，包括线条、形状、图像等...

Magicbox
Global site tag (gtag.js) - Google Analytics