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> ...
随机推荐
- C# HttpWebRequest GET HTTP HTTPS 请求
下面是我编写的一个辅助类,在这个类中采用了HttpWebRequest中发送GET/HTTP/HTTPS请求,因为有的时候需要获取认证信息(如Cookie),所以返回的是HttpWebResponse ...
- Gradle版本变更的问题
了解相关三个概念 gradle .gradle wrapper . gradle plugin (1)Gradle : 项目的构建工具,管理一个项目的依赖架包.性质和maven相似. (2)Gra ...
- sublime text 3插件
Package Control Messages Emmet emmet插件 Thank you for installing Emmet -- a toolkit that can greatly ...
- RDLC 子报表
1.RDLC 设计页面,拖入table或者矩形 2.右击表格或者矩形单元格,插入--子报表 3.输入名称和将此报表用作子报表 名称:显示在设计页面上的,仅作观看作用 将此报表用作子报表:填写目录下的需 ...
- Strus2第一次课：dom4j操作xml
先从底层的xml操作技术记录: 当我们新建一个项目,什么架包都没加入的时候,java提供了 org.w3c.dom给我们操作xml里面的元素 import org.w3c.dom.Document; ...
- iframe布局
代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- php访问远程服务器上的文件
test.php <?php $fp=fopen('http://www.baidu.com', 'r'); while (!feof($fp)) { $chunk=fgets($fp); ec ...
- 命名空间$.fn
$.fn.xxx是可以用对象来调用的命名空间,例如 $.fn.input() 在声明时就可以用 $('abc').input() $.fx是指jquery的特效. 如果使用显示.滑动.淡入淡出. ...
- ROS学习笔记（一）——软件版本的选择
下面是Google的SLAM系统Cartographer对系统的要求: Cartographer对ROS版本要求: ROS Indigo 对Ubantu 的版本要求: 所以,综上所述: Ubantu ...