- 浏览: 47444 次
文章分类
最新评论
本示例使用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 669<!DOCTYPE html> <html& ... -
jquery选择器总结
2016-09-22 10:59 464jQuery 的选择器可谓之强 ... -
网页选项卡的切换
2016-09-22 10:53 420<!DOCTYPE html> <html& ... -
JQuery的extend扩展
2016-09-18 15:23 396JQuery的extend扩展方法: Jquery ... -
jquery实现全选,全不选,反选效果
2016-09-13 15:41 409<!DOCTYPE html PUBLIC " ... -
jquery实现全选,全不选,反选效果
2016-09-13 15:40 0<!DOCTYPE HTML> <html& ... -
封装数据_方法
2016-08-26 17:30 473var simple_confNetwork={ in ... -
jquery对对象数组的遍历的两种方式
2016-08-26 15:00 1900jquery对对象数组的遍历的两种方式 data: [ { ... -
query,bootstrap在开发中使用的总结
2016-08-24 09:50 578当ajax请求返回的数据date如上面所显示,要达到下图所示的 ... -
select初始化操作
2016-08-23 15:54 748select 初始化值,option 的value是id,内容 ... -
select初始化操作
2016-08-23 15:50 0select 初始化值,option 的value是id,内容 ... -
bootstrap日期插件daterangepicker的使用
2016-08-22 10:59 886今天用的了bootstrap日期插件感觉搜索的资料不是很多在此 ... -
Jquery选择器
2016-08-19 10:08 626JQuery: 一:入门 二:选择器 三:DOM操作 四:事件 ... -
Vue.js 60 分钟快速入门
2016-08-19 09:20 515Vue.js介绍 Vue.js是当下很火的一个JavaScr ... -
Java构造和解析Json数据的两种方法详解一
2016-08-18 13:01 400在www.json.org上公布了很多JAVA下的json ... -
同步更新input中的内容
2016-08-16 14:15 507HTML: <div class="form ... -
JQuery验证
2016-08-16 09:46 481js-----> var table = in ... -
jQuery.Validate验证库的使用
2016-08-15 16:24 476一、用前必备 转载:http://www.cnblogs.c ...
相关推荐
html5数字时钟_html5电子时钟_html5时钟效果代码html5数字时钟_html5电子时钟_html5时钟效果代码html5数字时钟_html5电子时钟_html5时钟效果代码
jQuery html5时钟插件制作走动的时钟效果 jQuery html5时钟插件制作走动的时钟效果 jQuery html5时钟插件制作走动的时钟效果
基于html5canvas技术绘制clock时钟,封装与一个js库, new Clock(width,height,id) width时钟宽度 height时钟高度 id定位于那个html容器(div的id)
这是HTML5时钟,使用HTML5画布绘画而成,希望对大家有所帮助
简洁白色的HTML5指针时钟代码是一款能够获取本地在线时间的HTML5指针时钟代码。
纯html5绘制的本地时钟特效是一款非常漂亮html5时钟,整个界面都由html5绘制而成,效果特别不错。
纯Html5写的时钟 苹果风格,支持webkit浏览器
jquery+html5时钟插件clock,源码,Juqery效果.
通过用html+css+js写出来的简洁美观的时钟,适合新入门web前端用户学习,没有任何第三方的js,纯html + css + js 的时钟
html5实现时钟效果的插件,可以通过修改参数,修改样式
时钟代码
获取本地时间的Html5时钟特效.zip
canvas实现的带表盘和数字刻度HTML5时钟代码,里面有3种内置的主题,它带有时钟表盘界面和数字刻度。
圆形表盘高亮的HTML5时钟,网页电子钟表,动画效果的时钟特效,表盘的外框是一闪一闪发光,动态的发光效果,打开页面后,各个指针自动指向当前时间位置,秒针会自动走起。
HTML5的时钟实例,适合于HTML5的初级者学习,直接打开就可以看到效果
html5 canvas的简单使用 存在的不足之处请谅解
HTML5 简单的动画 数字时钟 解压后 点击这个html文件 html5_canvas_animations3.html 用FireFox4 ,IE9,Chrome访问
javascript HTML5 canvas 时钟