ECMAScript6 面向对象 时钟效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style>
body{
text-align:center;
}
#canvas{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="1300" height="600"></canvas>
<script src="js/digit.js" type="text/javascript"></script>
<!--<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>-->
<!--<script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script>-->
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="module">
class clock{
constructor(id,nowDate,x,y,r){
this.canvas=document.getElementById(id);
this.context=this.canvas.getContext("2d");
this.x= x;
this.y=y;
this.R=r;
this.balls=[];
this.colors=["#008000","#FF6600","#f92672","#e67e22","#960050","#aaffaa","#ae81ff","#a3dbec","#c7254e","#00A000"];
this.hours= 0;
this.minutes= 0;
this.seconds= 0;
this.lastSeconds= nowDate.getSeconds();
this.lastMinutes= nowDate.getMinutes();
this.lastHours=nowDate.getHours();
} init() {
let nowDate = new Date();
this.hours = nowDate.getHours();
this.minutes = nowDate.getMinutes();
this.seconds = nowDate.getSeconds();
this.update();
this.time();
} time() {
if (this.seconds != this.lastSeconds) {
if (parseInt(this.seconds / 10) != parseInt(this.lastSeconds / 10)) {
this.addBalls(this.x + 79 * (this.R + 1), this.y, parseInt(this.seconds / 10));
}
if (parseInt(this.seconds % 10) != parseInt(this.lastSeconds % 10)) {
this.addBalls(this.x + 96 * (this.R + 1), this.y, parseInt(this.seconds % 10));
}
this.lastSeconds = this.seconds;
}
if (this.minutes != this.lastMinutes) {
if (parseInt(this.minutes / 10) != parseInt(this.lastMinutes / 10)) {
this.addBalls(this.x + 38 * (this.R + 1), this.y, parseInt(this.minutes / 10));
}
if (parseInt(this.minutes % 10) != parseInt(this.lastMinutes % 10)) {
this.addBalls(this.x + 55 * (this.R + 1), this.y, parseInt(this.minutes % 10));
}
this.lastMinutes = this.minutes;
}
if (this.hours != this.lastHours) {
if (parseInt(this.hours / 10) != parseInt(this.lastHours / 10)) {
this.addBalls(this.x, this.y, parseInt(this.hours / 10));
}
if (parseInt(this.hours % 10) != parseInt(this.lastHours % 10)) {
this.addBalls(this.x + 15 * (this.R + 1), this.y, parseInt(this.hours % 10));
}
this.lastHours =this.hours;
} this.updateBall();
this.clearBall();
} update(){
this.context.clearRect(0,0,this.canvas.width,this.canvas.height); this.drawArc(this.x,this.y,parseInt(this.hours/10));
this.drawArc(this.x+15*(this.R+1),this.y,this.hours%10);
this.drawArc(this.x+29*(this.R+1),this.y,10);
this.drawArc(this.x+38*(this.R+1),this.y,parseInt(this.minutes/10));
this.drawArc(this.x+55*(this.R+1),this.y,this.minutes%10);
this.drawArc(this.x+70*(this.R+1),this.y,10); this.drawArc(this.x+79*(this.R+1),this.y,parseInt(this.seconds/10));
this.drawArc(this.x+96*(this.R+1),this.y,this.seconds%10); for(let i= 0;i<this.balls.length;i++) {
this.context.beginPath();
this.context.arc(this.balls[i].x, this.balls[i].y, this.R, 0, 2 * Math.PI, true);
this.context.fillStyle = this.balls[i].color;
this.context.closePath();
this.context.fill();
}
} drawArc(sx,sy,num){
for(let i=0;i<digit[num].length;i++){
for(let j=0;j<digit[num][i].length;j++) {
if (digit[num][i][j] == 1) {
let centerX = sx + j * 2 * (this.R + 1) + (this.R + 1);
let centerY = sy + i * 2 * (this.R + 1) + (this.R + 1);
this.context.beginPath();
this.context.arc(centerX, centerY, this.R, 0, 2 * Math.PI, true);
this.context.fillStyle = "#445588";
this.context.closePath();
this.context.fill();
}
}
}
} addBalls(sx,sy,num){
for(let i=0;i<digit[num].length;i++){
for(let j=0;j<digit[num][i].length;j++) {
if (digit[num][i][j] == 1) {
var centerX = sx + j * 2 * (this.R + 1) + (this.R + 1);
var centerY = sy + i * 2 * (this.R + 1) + (this.R + 1);
var ball = {
x: centerX,
y: centerY,
g: 3.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -2,
color: this.colors[Math.floor(Math.random() * this.colors.length)]
};
this.balls.push(ball);
}
}
}
} updateBall(){
for(let i= 0;i<this.balls.length;i++) {
this.balls[i].x+=this.balls[i].vx;
this.balls[i].y+=this.balls[i].vy;
this.balls[i].vy+=this.balls[i].g;
if(this.balls[i].y>=this.canvas.height-this.R) {
this.balls[i].y = this.canvas.height - this.R;
this.balls[i].vy = -this.balls[i].vy * 0.75;
}
}
} clearBall() {
let cnt = 0;
for (let i = 0; i < this.balls.length; i++) {
if (this.balls[i].x + this.R > 0 && this.balls[i].x - this.R < this.canvas.width) {
this.balls[cnt++] = this.balls[i];
}
}
while (this.balls.length > cnt) {
this.balls.pop();
}
}
} var clock1=new clock("canvas",new Date(),250,100,5);
clock1.init();
setInterval(function(){
clock1.init();
},50);
</script>
</body>
</html>
ECMAScript6 面向对象 时钟效果的更多相关文章
- Flash AS实现时钟效果（全脚本实现）
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- GDI绘制时钟效果，与系统时间保持同步，基于Winform
2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...
- 转 CSS3+js实现多彩炫酷旋转圆环时钟效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- JS实现时钟效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- [翻译]lithium介绍
什么是li3? 首创框架 li3 是第一个并且是唯一一个从PHP 5.3+建立起来的相当出色的php框架,而且破天荒的第一次引入全新技术,包括通过一组唯一,统一的api(接口)在关系型(relatio ...
- Android 软件盘 Editext 问题
显示的问题:android:windowSoftInputMode="adjustPan|stateHidden" 弹出布局Editext并且挤上去 android:windowS ...
- String 字符串递归截取字节字符串
public static String idgui(String s,int num)throws Exception{ int changdu = s.getBytes("UTF-8&q ...
- php数据类型及转换
- js设计模式总结-策略模式
策略模式 要解决的问题 当解决一个问题有多种方法时,选择使用哪种方法时就少不了要用大量的if语句进行判断,如果将这些方法的实现和判断语句放在一起实现就会产生问题, 比如增加一种的新的方法时,就不得不再 ...
- shell编程之变量
变量: 变量由字母.数字._ 组成,不能以数字开头 长度不能超过255个字符 在bash中,变量的默认类型是字符串类型 变量分类: 1.用户自定义变量:只在当前shell生效,是局部变量 定义方法: ...
- Kerberos是怎么工作的？
Kerberos是一种计算机网络授权协议,用来在非安全网络中,对个人通信以安全的手段进行身份认证. 采用客户端/服务器结构,并且能够进行相互认证,即客户端和服务器端均可对对方进行身份认证. 关键要素 ...
- IIS7.0 Appcmd 命令详解和定时重启应用池及站点的设置
IIS7.0 Appcmd 命令详解 废话不说!虽然有配置界面管理器!但是做安装包的时候命令创建是必不可少的!最近使用NSIS制作安装包仔细研究了一下Appcmd的命令,可谓是功能齐全. 上网查了些资 ...
- event事件对象和clientX,clientY
一.event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用.如:飞机-黑匣子 事件对象必须 ...
- SCOI2005栅栏
Description 农夫约翰打算建立一个栅栏将他的牧场给围起来,因此他需要一些特定规格的木材.于是农夫约翰到木材店购买木材.可是木材店老板说他这里只剩下少部分大规格的木板了.不过约翰可以购买这些木 ...