console
var WINDOW_WIDTH=1024, WINDOW_HEIGHT=768;
var RADIUS = 8;// 小球半径
var MARGIN_TOP= 60;
var MARGIN_LEFT= 30;
//安全色
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
var balls = []; //所有小球
const endDateTime = new Date();
endDateTime.setTime(endDateTime.getTime()+(3600*1000*2));
var curSecond = 0;
console.log= function(){};
window.onload= function () {
//console.log('开始');
curSecond = getCurSecond();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
initSize();
canvas.width= WINDOW_WIDTH;
canvas.height= WINDOW_HEIGHT;
window.addEventListener("resize", function () {
console.log('onresize');
initSize();
canvas.width= WINDOW_WIDTH;
canvas.height= WINDOW_HEIGHT;
});
// setInterval(function () {
// render(context);
// update();
// }, 50);
draw(context);
}
function draw(context) {
render(context);
update();
window.requestAnimationFrame(function () {
draw(context);
});
}
function initSize() {
//屏幕自适应
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
MARGIN_LEFT= Math.round(WINDOW_WIDTH/10);
//108是横向一共多少格子
RADIUS= Math.round(WINDOW_WIDTH*4 / 5 / 108)-1;
MARGIN_TOP= Math.round(WINDOW_HEIGHT/5);
}
function render(ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var hours = parseInt(curSecond/3600);
var minutes = parseInt((curSecond- hours*3600)/60);
var seconds = parseInt(curSecond%60);
// console.log(hours, 'hours');
// console.log(minutes, 'minutes');
// console.log(seconds, 'seconds');
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), ctx);
renderDigit(MARGIN_LEFT+ 15*(RADIUS+1),MARGIN_TOP, parseInt(hours%10), ctx);
renderDigit(MARGIN_LEFT+ 30*(RADIUS+1),MARGIN_TOP, 10, ctx);
renderDigit(MARGIN_LEFT+ 39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), ctx);
renderDigit(MARGIN_LEFT+ 54*(RADIUS+1),MARGIN_TOP, parseInt(minutes%10), ctx);
renderDigit(MARGIN_LEFT+ 69*(RADIUS+1),MARGIN_TOP, 10, ctx);
renderDigit(MARGIN_LEFT+ 78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), ctx);
renderDigit(MARGIN_LEFT+ 93*(RADIUS+1),MARGIN_TOP, parseInt(seconds%10), ctx);
//绘制小球
for(var i =0;i<balls.length;i++) {
var ball = balls[i];
ctx.fillStyle= ball.color;
ctx.beginPath();
ctx.arc(ball.x, ball.y, RADIUS, 0, 2*Math.PI);
ctx.closePath();
ctx.fill();
}
}
function getCurSecond() {
let useCountDown = false;
if(useCountDown){
let curTime = new Date().getTime();
var endTime = endDateTime.getTime();
// console.log(endDateTime, 'endDateTime');
var diffTime = endTime - curTime;
diffTime = Math.round(diffTime/1000);
return diffTime>=0?diffTime: 0;
}else{
let curDataTime = new Date();
var s = curDataTime.getHours()*3600 + curDataTime.getMinutes()*60 + curDataTime.getSeconds();
return s;
}
}
function addBalls(x, y, num) {
var numData = digit[num];
for(var i = 0; i<numData.length;i++){
var numData1 = numData[i];
for(var j =0;j<numData1.length; j++){
if(numData1[j] == 1){
var tRadius = RADIUS+1;
var tX = x+j*2*tRadius + tRadius;
var tY = y+i*2*tRadius+ tRadius;
var ball = {
x:tX,
y: tY,
g: 1.1+Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random()*1000)) * 4,
vy: -5,
color: colors[Math.floor(Math.random()*colors.length)],
};
balls.push(ball);
}
}
}
}
function update() {
var nextCountSecond = getCurSecond();
var nextHours = parseInt(nextCountSecond/3600);
var nextMinutes = parseInt((nextCountSecond- nextHours*3600)/60);
var nextSeconds = parseInt(nextCountSecond%60);
var hours = parseInt(curSecond/3600);
var minutes = parseInt((curSecond- hours*3600)/60);
var seconds = parseInt(curSecond%60);
if(nextCountSecond != curSecond){
curSecond = nextCountSecond;
if(parseInt(hours/10) != parseInt(nextHours/10)){
addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(hours/10));
}
if(parseInt(hours%10) != parseInt(nextHours%10)){
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10));
}
if(parseInt(minutes/10) != parseInt(nextMinutes/10)){
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10));
}
if(parseInt(minutes%10) != parseInt(nextMinutes%10)){
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10));
}
if(parseInt(seconds/10) != parseInt(nextSeconds/10)){
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10));
}
if(parseInt(seconds%10) != parseInt(nextSeconds%10)){
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10));
}
}
updateBalls();
}
function updateBalls() {
for(var i =0;i<balls.length;i++){
var ball = balls[i];
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
if(ball.y >= WINDOW_HEIGHT- RADIUS){
ball.y = WINDOW_HEIGHT-RADIUS;
ball.vy = -ball.vy*0.5;
}
}
var cnt = 0;
for(var i =0;i<balls.length;i++) {
var ball = balls[i];
if(ball.x +RADIUS>0 && ball.x-RADIUS< WINDOW_WIDTH){
balls[cnt++]=ball;
}
}
while (balls.length> cnt){
balls.pop();
}
}
function renderDigit(x, y, num, ctx) {
ctx.fillStyle= 'rgb(0,102,153)';
var numData = digit[num];
for(var i = 0; i<numData.length; i++){
var numData2 =numData[i];
for(var j = 0; j<numData2.length;j++){
if(numData2[j]==1){
ctx.beginPath();
var tRadius = RADIUS+1;
var tX = x+j*2*tRadius + tRadius;
var tY = y+i*2*tRadius+ tRadius;
ctx.arc(tX, tY,RADIUS, 0,2*Math.PI );
ctx.closePath();
ctx.fill();
}else{
}
}
}
}
//阿拉伯数字二进制数组
var 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,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]
],//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]
],//2
[
[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]
],//3
[
[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]
],//4
[
[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]
],//5
[
[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]
],//6
[
[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]
],//7
[
[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]
],//8
[
[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]
],//9
[
[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]
]//:
];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
</head>
<body style="height: 100%;width: 100%;position: fixed;top: 0;left: 0;">
<div class="canvasBox"></div>
<canvas id="canvas">
当前浏览器不支持canvas
</canvas>
</body>
</html>
html,body{
margin: 0;
padding: 0;
background-color: #333;
}
#canvas{
height: 100%;
display: block;
}