守望麦香花开
- 浏览: 49755 次
-
文章分类
最新评论
本示例使用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
点击这里查看效果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
分享到：
发表评论
-
validate自动校验
2016-09-23 15:32 1068<!DOCTYPE html> <html& ... -
jquery选择器总结
2016-09-22 10:59 499jQuery 的选择器可谓之强 ... -
网页选项卡的切换
2016-09-22 10:53 453<!DOCTYPE html> <html& ... -
JQuery的extend扩展
2016-09-18 15:23 439JQuery的extend扩展方法： Jquery ... -
jquery实现全选，全不选，反选效果
2016-09-13 15:41 441<!DOCTYPE html PUBLIC " ... -
jquery实现全选，全不选，反选效果
2016-09-13 15:40 0<!DOCTYPE HTML> <html& ... -
封装数据_方法
2016-08-26 17:30 508var simple_confNetwork={ in ... -
jquery对对象数组的遍历的两种方式
2016-08-26 15:00 1926jquery对对象数组的遍历的两种方式 data: [ { ... -
query，bootstrap在开发中使用的总结
2016-08-24 09:50 610当ajax请求返回的数据date如上面所显示，要达到下图所示的 ... -
select初始化操作
2016-08-23 15:54 797select 初始化值，option 的value是id,内容 ... -
select初始化操作
2016-08-23 15:50 0select 初始化值，option 的value是id,内容 ... -
bootstrap日期插件daterangepicker的使用
2016-08-22 10:59 928今天用的了bootstrap日期插件感觉搜索的资料不是很多在此 ... -
Jquery选择器
2016-08-19 10:08 657JQuery: 一：入门 二：选择器 三：DOM操作 四：事件 ... -
Vue.js 60 分钟快速入门
2016-08-19 09:20 556Vue.js介绍 Vue.js是当下很火的一个JavaScr ... -
Java构造和解析Json数据的两种方法详解一
2016-08-18 13:01 434在www.json.org上公布了很多JAVA下的json ... -
同步更新input中的内容
2016-08-16 14:15 545HTML： <div class="form ... -
JQuery验证
2016-08-16 09:46 526js-----> var table = in ... -
jQuery.Validate验证库的使用
2016-08-15 16:24 510一、用前必备 转载：http://www.cnblogs.c ...
相关推荐
【纯Html5时钟】是一种基于HTML5技术构建的网页时钟，其设计灵感来源于苹果产品的界面风格，因此具有简洁、优雅的特点。这种时钟专为支持Webkit内核的浏览器设计，例如Chrome、Safari等，能提供流畅且实时的时钟显示...
【简洁白色的HTML5时钟代码】是一个以HTML5为基础，结合JavaScript实现的在线实时时钟效果，其设计风格以白色为主，简洁而不失功能性。这个时钟代码的主要目标是为网页提供一个直观的时间显示功能，它能动态地更新...
【Html5时钟】是一种利用HTML5、CSS3和JavaScript技术构建的实时显示时间的网页应用。这个项目对于初学者来说是一个很好的实践案例，因为它涵盖了Web前端开发的基础知识，包括结构化标签、样式表现和动态功能。下面...
HTML5时钟显示是一种利用HTML5的Canvas API创建的动态时间展示方式，它不仅展示了HTML5的现代化功能，还体现了Web开发中交互性和实时性的增强。在这个项目中，开发者使用了Canvas元素，这是一种在网页上绘制图形的...
HTML5时钟代码是一个网页应用，它利用HTML5的特性，结合CSS3和JavaScript来创建一个实时显示时间的动态时钟。这个应用的核心是通过JavaScript获取当前系统时间，并将其更新到页面上，使得用户可以直观地看到当前的...
HTML5数字时钟是一种利用HTML5的Canvas API和JavaScript编程技术来实现的动态时钟效果。这个技术在网页设计和开发中广泛应用，为用户提供了一种实时、直观的时间展示方式，无需依赖任何外部插件或服务器端的数据更新...
在本文中，我们将深入探讨如何使用jQuery和HTML5来创建一个动态走动的时钟插件。这个插件能够实时显示当前时间，并且通过CSS3的动画效果为用户带来更直观、更生动的视觉体验。 首先，让我们了解基础概念： **...
《jQuery + HTML5 时钟插件：clock详解》 在网页开发中，实时显示时间是一种常见的需求，jQuery 和 HTML5 的结合为实现这一功能提供了强大的工具。"jquery+html5时钟插件clock"正是这样一款利用这两种技术构建的...
HTML5时钟是一种利用HTML5的新特性，特别是Canvas API，来创建动态、交互式的时钟显示。Canvas是HTML5中的一个绘图元素，允许开发者在网页上进行2D图形的绘制，无需借助Flash或其他插件。这个“html5时钟”项目可能...
基于html5canvas技术绘制clock时钟，封装与一个js库， new Clock(width,height,id) width时钟宽度 height时钟高度 id定位于那个html容器（div的id）
在本项目"获取本地时间的Html5时钟特效"中，我们将探讨如何利用HTML5、jQuery、JavaScript和CSS来实现一个实时显示本地时间的时钟特效。 首先，HTML5是基础，它的`<canvas>`元素提供了画布，可以用于绘制图形，包括...
这个名为"圆形表盘高亮的HTML5时钟.rar"的压缩包文件包含了一个使用HTML5和CSS3技术实现的动态圆形时钟的源代码。这个网页时钟设计独特，表盘采用圆形布局，具有高亮和闪烁的发光效果，为用户提供了视觉上的吸引力。...
HTML5时钟是一种利用网页技术实现的实时时间显示工具，主要通过HTML5的Canvas API来绘制动态的时钟界面。这个特定的时钟代码包含一个带有表盘和数字刻度的交互式设计，并且提供了三种内置的主题供用户选择。下面我们...
html5实现时钟效果的插件，可以通过修改参数，修改样式
【纯HTML5绘制的本地时钟特效】是一个利用HTML5技术实现的创新视觉效果，它展示了HTML5的强大功能和灵活性。HTML5作为一种先进的标记语言，不仅增强了网页的结构化能力，还提供了丰富的媒体支持和离线存储等功能。在...
会走动的图形html5时钟示例.doc
在这个“HTML5的时钟实例”中，初级学习者可以了解到如何利用HTML5的Canvas API创建一个实时更新的时钟。 首先，让我们详细探讨HTML5的Canvas API。Canvas是一个二维绘图上下文，允许开发者通过JavaScript来绘制...