var CANVAS_WIDTH = 1200;var CANVAS_HEIGHT = 800;var RADIUS = 5;var MARGIN_TOP = 20;var MARGIN_LEFT = 90;var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");canvas.width = CANVAS_WIDTH;canvas.height = CANVAS_HEIGHT;var endTime = new Date(2018, 11, 30, 1, 24, 45);var curTimeSecond = 0;var balls = [];const colors = ["#fc5555", "#f3c175", "#fff896", "#b9fa85", "#85fdb7", "#74fff3", "#67aeff", "#9a8ffa", "#fd9efd", "#fd8dbc", "#ff8989"];curTimeSecond = getCurTimeSecond(endTime);setInterval( function() { render(context); update(); }, 50);function getCurTimeSecond(endTime) { var curTime = new Date(); curTimeSecond = endTime.getTime() - curTime.getTime(); curTimeSecond = Math.round(curTimeSecond / 1000); return curTimeSecond > 0 ? curTimeSecond : 0;}function update() { var nextTimeSecond = getCurTimeSecond(endTime); var nextDay = nextTimeSecond / (3600 * 24); var nextHour = (nextTimeSecond - parseInt(nextDay) * 3600 * 24) / 3600; var nextMin = (nextTimeSecond - parseInt(nextDay) * 3600 * 24 - parseInt(nextHour) * 3600) / 60; var nextSec = nextTimeSecond % 60; var curDay = curTimeSecond / (3600 * 24); var curHour = (curTimeSecond - parseInt(curDay) * 3600 * 24) / 3600; var curMin = (curTimeSecond - parseInt(curDay) * 3600 * 24 - parseInt(curHour) * 3600) / 60; var curSec = curTimeSecond % 60; if (nextSec != curSec) { if (parseInt(nextDay/100) != parseInt(curDay/100)) { addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curDay/100)); } if (parseInt((nextDay%100)/10) != parseInt((curDay%100)/10)) { addBalls(MARGIN_LEFT + 15*(RADIUS + 1), MARGIN_TOP, parseInt((curDay%100)/10)); } if (parseInt(nextDay%10) != parseInt(curDay%10)) { addBalls(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, parseInt(curDay % 10)); } if (parseInt(nextHour/10) != parseInt(curHour/10)) { addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curHour / 10)); } if (parseInt(nextHour%10) != parseInt(curHour%10)) { addBalls(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, parseInt(curHour % 10)); } if (parseInt(nextMin/10) != parseInt(curMin/10)) { addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curMin / 10)); } if (parseInt(nextMin%10) != parseInt(curMin%10)) { addBalls(MARGIN_LEFT + 108 * (RADIUS + 1), MARGIN_TOP, parseInt(curMin % 10)); } if (parseInt(nextSec/10) != parseInt(curSec/10)) { addBalls(MARGIN_LEFT + 132 * (RADIUS + 1), MARGIN_TOP, parseInt(curSec / 10)); } if (parseInt(nextSec%10) != parseInt(curSec%10)) { addBalls(MARGIN_LEFT + 147 * (RADIUS + 1), MARGIN_TOP, parseInt(curSec % 10)); } curTimeSecond = nextTimeSecond; } updateBalls();}function updateBalls() { for (var i = 0; i < balls.length; i++) { balls[i].x += ball[i].vx; balls[i].y += balls[i].vy; balls[i].vy += balls[i].g; if (balls[i].y >= canvas.height - RADIUS) { balls[i].y = canvas.height - RADIUS; balls[i].vy = -balls[i].vy*0.75; } }}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 * (RADIUS + 1) + (RADIUS + 1), y : y + i * 2 * (RADIUS + 1) + (RADIUS + 1), g : 1.5 + Math.random(), vx : Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, vy : -5, color : colors[Math.floor(Math.random() * colors.length)] }; balls.push(aBall); } } }}function render(ctx) { ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); var day = curTimeSecond / (3600 * 24); var hour = (curTimeSecond - parseInt(day) * 3600 * 24) / 3600; var min = (curTimeSecond - parseInt(day) * 3600 * 24 - parseInt(hour) * 3600) / 60; var sec = curTimeSecond % 60; drawNum(MARGIN_LEFT, MARGIN_TOP, parseInt(day / 100), ctx); drawNum(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt((day % 100) / 10), ctx); drawNum(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, parseInt(day % 10), ctx); drawNum(MARGIN_LEFT + 45 * (RADIUS + 1), MARGIN_TOP, 10, ctx); drawNum(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(hour / 10), ctx); drawNum(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, parseInt(hour % 10), ctx); drawNum(MARGIN_LEFT + 84 * (RADIUS + 1), MARGIN_TOP, 10, ctx); drawNum(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(min / 10), ctx); drawNum(MARGIN_LEFT + 108 * (RADIUS + 1), MARGIN_TOP, parseInt(min % 10), ctx); drawNum(MARGIN_LEFT + 123 * (RADIUS + 1), MARGIN_TOP, 10, ctx); drawNum(MARGIN_LEFT + 132 * (RADIUS + 1), MARGIN_TOP, parseInt(sec / 10), ctx); drawNum(MARGIN_LEFT + 147 * (RADIUS + 1), MARGIN_TOP, parseInt(sec % 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, RADIUS, 0, 2*Math.PI); ctx.closePath(); ctx.fill(); }}function drawNum(x, y, num, ctx) { ctx.fillStyle = "rgb(20, 120, 150)"; 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 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); } } }}
我另添加了三位的天数,时钟可以走但是没有小球的效果
看起来好乱。。我是直接复制过来的