Javascript学习--时间
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
var canvasWidth = document.documentElement.clientWidth - 20,
canvasHeight = document.documentElement.clientHeight - 20,
r = Math.round(canvasWidth * (4 / 5) / 108) - 1,
marginTop = Math.round(canvasHeight / 5),
marginLeft = Math.round(canvasWidth / 10); var curtimeSeconds = getcurtimeSeconds();
var balls = [];
var colors = ['#33b5be', '#0099cc', '#aa66cc', '#9933cc', '#99cc00', '#669900', '#ffbb33', '#ff8800', '#ff4444', '#cc0000'];
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//获取截止时间与当前时间的秒数
function getcurtimeSeconds() {
var curTime = new Date();
//时钟
var betweenTime = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
return betweenTime;
} function renderDigit(x, y, num, ctx) {
ctx.fillStyle = 'orange';
for(var i = 0; i < digit[num].length; i++) {
for(var j = 0; j < digit[num][i].length; j++) {
if(digit[num][i][j] == 1) {
ctx.beginPath();
ctx.arc(x + j * 2 * (r + 1) + (r + 1), y + i * 2 * (r + 1) + (r + 1), r, 0, 2 * Math.PI);
ctx.fill();
}
}
}
} function renderM(ctx) {
renderDigit(marginLeft + 30 * (r + 1), marginTop, 10, ctx);
renderDigit(marginLeft + 69 * (r + 1), marginTop, 10, ctx);
}
//闪烁的冒号
function bilibili(ctx) {
var nowTime = new Date();
var nowString = nowTime.getTime().toString();
var cutTime = nowString.substr(-4);
var nowSeconds = parseInt(cutTime);
// console.log(nowSeconds);
if(Math.round(nowSeconds / 1000) === Math.floor(nowSeconds / 1000)) {
renderM(ctx);
}
} function updateBalls() {
for(var i = 0; i < balls.length; i++) {
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
//碰撞检测
if(balls[i].y >= canvasHeight - r) {
balls[i].y = canvasHeight - r;
balls[i].vy = -balls[i].vy * 0.8; }
}
//删除画布外的球，提高性能
var count = 0;
for(var i = 0; i < balls.length; i++) {
if(balls[i].x + r > 0 && balls[i].x - r < canvasWidth) {
balls[count++] = balls[i];
}
}
while(balls.length > count) {
balls.pop();
}
} function addBalls(x, y, num) {
for(var i = 0; i < digit[num].length; i++) {
for(var j = 0; j < digit[num][i].length; j++) {
if(digit[num][i][j] == 1) {
var aBall = {
x: x + j * 2 * (r + 1) + (r + 1),
y: y + i * 2 * (r + 1) + (r + 1),
g: 1.5 + Math.random(), //重力加速度
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 3,
vy: -5,
color: colors[Math.floor(Math.random() * colors.length)]
}
balls.push(aBall);
}
}
}
} function render(ctx) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var hours = parseInt(curtimeSeconds / 3600),
minutes = parseInt((curtimeSeconds - hours * 3600) / 60),
seconds = curtimeSeconds % 60;
renderDigit(marginLeft, marginTop, parseInt(hours / 10), ctx);
renderDigit(marginLeft + 15 * (r + 1), marginTop, parseInt(hours % 10), ctx); renderDigit(marginLeft + 39 * (r + 1), marginTop, parseInt(minutes / 10), ctx);
renderDigit(marginLeft + 54 * (r + 1), marginTop, parseInt(minutes % 10), ctx); renderDigit(marginLeft + 78 * (r + 1), marginTop, parseInt(seconds / 10), ctx);
renderDigit(marginLeft + 93 * (r + 1), marginTop, parseInt(seconds % 10), ctx); //绘制掉落的小球
for(var i = 0; i < balls.length; i++) {
ctx.fillStyle = balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x, balls[i].y, r, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
}
//更新时间，为小球掉落运动做准备
function update() {
var nexttimeSeconds = getcurtimeSeconds();
var nextHours = parseInt(nexttimeSeconds / 3600),
nextMinutes = parseInt((nexttimeSeconds - nextHours * 3600) / 60),
nextSeconds = nexttimeSeconds % 60;
var curHours = parseInt(curtimeSeconds / 3600),
curMinutes = parseInt((curtimeSeconds - curHours * 3600) / 60),
curSeconds = curtimeSeconds % 60; if(nextSeconds != curSeconds) {
//小时
if(parseInt(curHours / 10) != parseInt(nextHours / 10)) {
addBalls(marginLeft, marginTop, parseInt(curHours / 10));
}
if(parseInt(curHours % 10) != parseInt(nextHours % 10)) {
addBalls(marginLeft + 15 * (r + 1), marginTop, parseInt(curHours / 10));
}
//分
if(parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
addBalls(marginLeft + 39 * (r + 1), marginTop, parseInt(curMinutes % 10));
}
if(parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
addBalls(marginLeft + 54 * (r + 1), marginTop, parseInt(curMinutes % 10));
}
//秒
if(parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
addBalls(marginLeft + 78 * (r + 1), marginTop, parseInt(curSeconds / 10));
}
if(parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
addBalls(marginLeft + 93 * (r + 1), marginTop, parseInt(curSeconds % 10));
} //如果时间变化，那么改变时间
curtimeSeconds = nexttimeSeconds;
}
updateBalls();
} setInterval(function() {
render(context);
update();
bilibili(context);
}, 50);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时</title>
</head>
<body>
<canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
<script type="text/javascript" src="js/digit.js" ></script>
<script type="text/javascript" src="js/countdown.js" ></script>
</body>
</html>
Javascript学习--时间的更多相关文章
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习05 定时器
JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...
- JavaScript学习04 对象
JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...
- JavaScript学习总结-技巧、有用函数、简洁方法、编程细节
整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- javascript学习-对象与原型
javascript学习-对象与原型 Javascript语言是符合面向对象思想的.一般来说,面向对象思想需要满足以下三个基本要求: 封装,Javascript的对象可以自由的扩充成员变量和方法,自然 ...
随机推荐
- 地址总线、数据总线、寻址能力、字长及cpu位数等概念之间的关系
地址总线决定了CPU的寻址能力:数据总线的宽度与字长及CPU位数一致. 详细解释见下文: 1.地址总线与寻址能力 要存取数据或指令就要知道数据或指令存放的位置,地址寄存器存储的就是CPU当前要存取的数 ...
- [代码审计]青云客Cms前台有条件注入至getshell，后台xss至getshell、至弹你一脸计算器
之前写了一篇关于青云客cms的文章,发在了t00ls,就不copy过来了. 给个链接,好记录一下. https://www.t00ls.net/thread-43093-1-1.html
- Java多线程窥探
1.程序,进程,线程 标准定义:
- IE常见bug及其修复方法
一.双边距浮动的bug 1.1一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box) 2.1在浮动元素上使用了左边界(margin-left)来令它和容器的左边产 ...
- 【转载】mysql主键的缺少导致备库hang
最近线上频繁的出现slave延时的情况,经排查发现为用户在删除数据的时候,由于表主键的主键的缺少,同时删除条件没有索引,或或者删除的条件过滤性极差,导致slave出现hang住,严重的影响了生产环境的 ...
- js实现黑客帝国文字下落效果
突然想到这个效果便想实现以下. 当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章, 效果可以查看博文中的给出的效果图.那 ...
- JavaScript语法详解：JS简介&变量
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...
- Modelsim独立仿真Vivado Clocking Wizard IP Core
工欲善其事,必先利其器.在使用Vivado自带的仿真软件仿真的时候,相对于更优秀的仿真工具Modelsim,效率低了很多,为了更高效的开发,我尝试着用Vivado级联Modelsim仿真,但是级联后还 ...
- iOS学习——Xcode9上传项目到GitHub
最近通过视频在学习一个完整项目的开发流程和思路,为了更真实地模拟在实际开发中的流程,我们需要将项目的代码以及一些资料进行版本控制和管理,一般比较常用的SVN或者Github进行代码版本控制和项目管理. ...
- Angular02 通过angular-cli来搭建web前端项目
利用angular-cli的常见命令: npm i --save 包名 -> 软件依赖 npm i --save-dev 包名 -> 开发依赖 ng new 项 ...