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> ...
随机推荐
- python 学习笔记十六 django深入学习一 路由系统，模板，admin，数据库操作
django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...
- ajax 无刷新上传
最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...
- 【leetcode❤python】 189. Rotate Array
#-*- coding: UTF-8 -*-#由于题目要求不返回任何值,修改原始列表,#因此不能直接将新生成的结果赋值给nums,这样只是将变量指向新的列表,原列表并没有修改.#需要将新生成的结果赋予 ...
- 利用PhantomJS进行网页截屏，完美解决截取高度的问题
关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...
- linux安装配置apk打包程序gradle+jdk+Android_sdk+python自动化编译脚本
安装gradle: 1.下载gradle包 去这里下载需要的tar.gz包:https://services.gradle.org/distributions/ 2.解压 tar zxvf gradl ...
- 设置hr标签的粗细
hr {border:0px;border-bottom:1px solid #5c5c3d;}
- 自己常用JS和JQ 函数
//验证码函数 <button id="send">点击发送验证码</button> <script src="jquery.min.js& ...
- 学习 ---- JavaScript 高级设计程序 第三章（数据类型）
3.4 数据类型 基本数据类型:Undefined.Null.Boolean.Number.String 复杂数据类型:Object 3 ...
- ROWID伪列
ROWID伪列概念: 在数据表中每一行所保存的记录,oracle会为每条记录分配一个唯一的地址编号,这个编号就是通过ROWID表示的. 所有的数据都利用ROWID进行定位. 观察rowid的存在 SQ ...
- Linux ftp 使用
FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application ...