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> ...
随机推荐
- HQL查询——select子句
select子句 select子句用于选择指定的属性或者直接选择某个实体,当然select选择的属性必须是from之后持久化类包含的属性: select p.name from Person as p ...
- Stl源码剖析读书笔记之Alloc细节
阅读基础: Foo *pf = new Foo; 执行了两个步骤: 1)::operator new 向系统申请内存. 2) 调用Foo::Foo()构造函数构造实例. ==> 申请内存,构造 ...
- cocos2dx解决苹果正版ipv6的问题
苹果官方出了新的规定,要求新上架的app都必须单独支持ipv6-only的网络. 具体的要求链接:https://developer.apple.com/library/mac/documentati ...
- eclipse maven web环境搭建
选择创建new project 勾选跳过创建类型选择(让eclipse创建标准maven项目) 填写组织ID,唯一ID,注意:如果选择打包类型为war包时,会生成web类型的maven工程 修改JRE ...
- 理论基础知识之————KB Kb Kbps 相关单位的区别和换算
换算公式 8bit(位)=1Byte(字节) 1024Byte(字节)=1KB 1024KB=1MB 1024MB=1GB 1024GB=1TB 容量是大写的 B 而传输的速度是小写的 b bps ...
- 自动生成.py文件头部的C语言小程序
每次都 vi xxx.py 然后再打 #!/usr/bin/env python 等等的程序头信息感觉有点麻烦,于是便想着写一个小程序自动生成这些头信息了,顺便在 ~/.bashrc 里写入 alia ...
- 18TH赛事管理
赛事管理者 项目psp: 一.计划 估计这个任务需要7天时间 二.开发 1.需求分析 作为一个赛事管理者,我希望知道每场比赛的队伍得分和积分情况,以便给每队进行排名. 2.生成设计文档 查询出每场得分 ...
- 转：Eclipse快捷键 10个最有用的快捷键
Eclipse快捷键 10个最有用的快捷键 Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代 ...
- JQuery_DOM 节点操作之复制、替换和 删除节点
一.复制节点 <script type="text/javascript" src="jquery-1.12.3.min.js"></scri ...
- Tableau(数据抽取)
如果启用的是标准的企业数据库,TABLEAU中做实时分析会比较困难,例如以下情况:(1)不在办公室,无法连接到数据库:(2)在Microsoft SQL Server或者Oracle,在数据库很大或者 ...