JS画图之七【时钟】
样例:http://www.zhaojz.com.cn/demo/draw12.html
依赖:圆
一、定义对象:针
//定义钟表指针
//dotClock 原点
//len 指针长度
function ClockHand(dotClock, len, opts){
this.points = [];
this.dotClock = dotClock;
this.len = len;
this.currentAngle = opts.angle?(270+opts.angle):270; //偏移角
this.drawed = false;
this.type = opts.type?opts.type:""; //指针类型,分时针、分针和秒针
this.color = opts.color?opts.color:"DarkRed"; //指针颜色
this.weight = opts.weight?opts.weight:1; //指针宽度
}
//绘制指针
ClockHand.prototype.draw = function(){
if(!this.drawed){
var rad = this.currentAngle*Math.PI/180; //计算弧度
this.points = getLine(this.dotClock, [this.dotClock[0]+this.len*Math.cos(rad), this.dotClock[1]+this.len*Math.sin(rad)]
,{
color: this.color,
pw: this.weight,
ph: this.weight
});
var i = 0;
while(i < this.points.length){
document.body.appendChild(this.points[i]);
i++;
}
this.drawed = true;
}
}
//擦除指针
ClockHand.prototype._erase_ = function(){
if(this.drawed){
var i = 0;
while(i < this.points.length){
document.body.removeChild(this.points[i]);
i++;
}
this.points = [];
this.drawed = false;
}
}
二、定义对象:钟
//定义钟表
function Clock(dot, r){
this.cid = new Date().getTime(); //唯一标识
this.dot = dot; //原点
this.r = r; //半径
if(!window.myClock){
window.myClock = {};
}
window.myClock[this.cid+""] = this; //保存引用
}
//初始化,画表盘、刻度和指针
Clock.prototype.init = function(){
drawCircle(this.dot, this.r, 1);
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
this.hourHand = new ClockHand(this.dot, this.r*0.5, {type:"HOUR",color:"BLACK",weight: 2, angle: (hour%12*(360/12)+minute*(360/(12*60))+second*(360/(12*60*60)))});
this.minuteHand = new ClockHand(this.dot, this.r*0.89, {type:"MIN",color:"DarkRed",weight: 2, angle: (minute*(360/60)+second*(360/(60*60)))});
this.secondHand = new ClockHand(this.dot, this.r*0.91, {type:"SEC",color:"RED",weight: 1, angle: (second*(360/60))});
this.hourHand.draw();
this.minuteHand.draw();
this.secondHand.draw();
return this;
}
//开始走时
Clock.prototype.start = function(){
setInterval("myClock['"+this.cid+"']._running_();",1000);
} Clock.prototype._running_ = function(){
this.secondHand._erase_();
this.minuteHand._erase_();
this.minuteHand._erase_();
this.init();
}
三、调用
//半径
var r= 100;// 原点
var dot2 = [200, 200]; new Clock(dot2, r).init().start();
PS:上述脚本所依赖的其它方法,可以通过查看网页源代码以及下载页面所引用的js文件获得。
JS画图之七【时钟】的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- js绘制圆形时钟
纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js数字滑动时钟
js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
- 原生js实现中文时钟
零.寒暄 终于一个月可以更新两篇博客了,开心.昨天花了大概一天的时间玩了下github,基本的clone和push都搞定了,如果有和我一样的新手没调通的,大家可以交流. 另外,说个题外话,大家发现我的 ...
- js+css3动态时钟-------Day66
昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在 ...
- 简单的js实现网页时钟
js实现时钟. <div id="clock"></div> <script type="text/javascript"> ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
随机推荐
- C语言之二维数组棋盘游戏
#include<iostream> #include<stdio.h> using namespace std; int main() { //-1 没人赢 0:O赢 1:X ...
- 【原创精品】程序员最强大的利器——电子笔记本的思考(1)(ver0.3)
[原创精品]程序员最强大的利器,本文以下内容全都是作者EverStenis(胡佳吉)的原创,未经授权不得转载,抄袭必究. 我想问大家一个问题,对于我们程序员来说,在我们的武器工具库中,最强大的一件利器 ...
- LVS+keepalived快速搭建测试环境
#LVS+keepalived快速搭建测试环境 #LVS+keepalived快速搭建测试环境 #centos6 X64 # LVS 负载均衡模式:DR(直接路由) 192.168.18.31 mas ...
- HDU2191--多重背包(二进制分解+01背包)
悼念512汶川大地震遇难同胞--珍惜现在,感恩生活 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- mysql 索引类型
根据类型分为普通索引2种类型,hash 和b-tree 最常用 hash是按一对一索引的.速度 最快但不支持范围 比如where name = 'dd' 最快.但是使用 date >3 ...
- mysql 有哪些索引
Mysql支持哪几种索引 从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=&quo ...
- python3 三级菜单-基础版
# -*- coding:utf-8 -*- data = { "北京":{ "东城区":{ "安定门":["国子监", ...
- 树莓派搭建pptp---vpn
好久没写博文了啊,这次好好写 先普及下知识啊 PTP(Point to Point Tunneling Protocol),即点对点隧道协议.该协议是在PPP协议的基础上开发的一种新的增强型安全协议, ...
- QT制作一个图片播放器
前言:使用qt制作了一个简单的图片播放器,可以播放gif.png等格式图片 先来看看播放器的功能(当然是很简陋的,没有很深入的设计): 1.点击图片列表中图片进行播放. 2.自动播放,播放的图片的间隔 ...
- 使用AOP实现缓存注解
为何重造轮子 半年前写了一个注解驱动的缓存,最近提交到了github.缓存大量的被使用在应用中的多个地方,简单的使用方式就是代码先查询缓存中是否存在数据,如果不存在或者缓存过期再查询数据库,并将查询的 ...