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> ...
随机推荐
- SQL Join的一些总结
1.1.1 摘要 Join是关系型数据库系统的重要操作之一,SQL Server中包含的常用Join:内联接.外联接和交叉联接等.如果我们想在两个或以上的表获取其中从一个表中的行与另一个表中的行匹配的 ...
- 如何使用JDBC实现数据访问对象层（DAO）
JAVA是面向对象的语言,开发者在操作数据的时候,通常更习惯面对一个特定类型的对象,如一个用户就是一个User类的对象.DAO层需要做的,就是为上层提供充分的对象支持,让上层再也看不到具体的数据,而是 ...
- json接口
http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz2 ...
- 21.TFS文件系统搭建笔记
TFS文件系统搭建笔记 参考地址: https://github.com/alibaba/tfs/blob/master/INSTALL.md https://github.com/alibaba/t ...
- 根据标记清空页面中所有的input对象
function clear1(flag) { //获取页面中所有的input对象 var inputs = document.getElementsByTagName("input&quo ...
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
- [转]Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...
- Linq常用语法详细
1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme select r; //2 var ss1 = db.Am_recProScheme; // ...
- js 刷新窗口
在js 方法里面 1.window.opener.location.reload() 刷新父窗口 2.window.location.reload() 该方法强迫浏览器刷新当前 ...
- mac 安装php7
卸载php55 brew unlink php55 brew install homebrew/php/php70 安装成功信息 To enable PHP in Apache add the fol ...