html如何添加时钟效果,HTML5实现时钟效果
以下是完整代码,保存到html文件可以查看效果。
HTML5时钟-柯乐义
柯乐义 原文
HTML5时钟
柯乐义提示您,请使用支持HTML5的浏览器,例如Chrome,IE9,IE10,Firefox等。
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无法预览.');
}
html如何添加时钟效果,HTML5实现时钟效果相关推荐
- php绘制时钟刻度,html5 画布时钟效果
网上看到个时钟效果,感觉挺好看,转了来,具体通过html5画布技术实现的,效果图如下: 具体 html 代码: html5 时钟效果 /** * Created by Administrator on ...
- html 搜索 高亮效果,html5输入框高亮效果
[实例简介]登录界面输入框高亮效果 [实例截图] [核心代码] 当前输入框高亮显示 body,form,h2,p,input{margin:0;padding:0;} body{color:#4f4f ...
- html5悬浮效果,html5悬浮球效果
1 .SuspendedBall{ 2 position:fixed; 3 width:50px; 4 height:50px; 5 background:#3071a9; 6 border-radi ...
- html酷炫电子时钟效果,Html5时钟特效代码
Html5时钟特效代码html> 时钟 canvas{display: block;margin: 0 auto;} 抱歉,您的浏览器不支持canvas画布 var myCanvas=docum ...
- 在html中加上时钟,Html5绘制时钟
最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: //绘制圆形的弧度,ctx 为绘制环境,x,y为绘制中心, ...
- html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下 复制代码代码如下: var clock=document.getElementById("clock"); var ...
- html时钟翻牌效果,前端开发 翻牌效果
前端高级开发视频|前端开发做单个页面|前端开发用低压还是标压处理器 思路: 最基本的思路:点击一张图片时,该张图片就要隐藏掉,把下方的图片显示出来. 效果:翻牌的效果,以图片中轴为基准,实现旋转的翻牌 ...
- 14个HTML5实现的效果合集
HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就 ...
- 歪解单片机的时钟系统--关于内外时钟切换及时钟超频测试
群友问过这种问题,外部接8M晶振和16M晶振有啥区别? 以我微薄的经验来看,这两个在用的时候差别不大,如果使用ST的固件库(以STM32F103为例),使用8M的晶振会更方便,不用改任何 ...
最新文章
- 你好,C++(18) 到底要不要买这个西瓜?4.1.6 操作符之间的优先顺序
- mysql5.6.27_Centos上安装Mysql5.6.27多实例
- [转]侯捷对进入IT行业的年轻人的建议
- 简单说明c语言中常用的基本数据类型有哪些,C语言基本数据类型的.ppt
- SAP S/4HANA装到Docker里的镜像有多大
- HTTP状态代码及其定义
- 618活动海报还没想法?PSD页面设计参考能给你灵感
- 企业文化用品展示网页的开发
- sql server 面试_SQL Server审核面试问题
- JDBC在spring中的使用
- 西瓜书读书笔记5-决策树的分裂原则
- Rust: 属性(attribute)的含义及文档大全
- android 线程使用监控思路分享
- 【CF643D】Bearish Fanpages(set)(模拟)
- springboot使用xxl-job
- 记录一次神奇的大物实验——用模拟法测绘静电场——别人都是打铁~我们打孔~~~
- csdn怎么了???
- 20145204 张亚军《信息安全系统设计基础》第12周学习总结
- C# Snap7 实现对西门子PLC的读写(本篇主要对系统诊断缓存区(SSL或SZL)内容进行读取)
- 用matlab画多普勒加宽线性函数,洛伦兹线性函数
热门文章
- 神经网络参数个数计算,神经网络的参数设置
- 【已解决】体视显微镜左右成像大小不一致
- python中dic.get用法
- LoRa 扩频因子和码片
- 名词诠释大全以及新站上线后,seo优化应该如何做?
- 4g手机关闭4g信号显示无服务器,手机4G信号栏为什么突然出现“HD”?原来开通了这个业务,望周知...
- 乐优商城:笔记(六):上传微服务:LyUpload
- oracle修改分区表的默认空间,Oracle数据库学习_Oracle分区表的分区占用空间为什么是8M?如何修改分区的初始空间?...
- 极视角与山东港口科技集团青岛有限公司共建「AI 赋能智慧港口联合实验室」
- 如何解决 Android浏览器查看背景图片模糊的问题?