const WINDOW_WIDTH = 1024, WINDOW_HEIGHT = 768, RADIUS = 6, MARGIN_LEFT = 20, MARGIN_TOP = 20; var nowTime = 0, ball = []; const endTime = new Date(2016, 2, 4, 22, 00, 00), colors = ["red", "yellow", "blue"]; window.onload = function() { var canvas = document.getElementById("canvas"); var ct = canvas.getContext('2d'); ct.width = WINDOW_WIDTH; ct.height = WINDOW_HEIGHT; nowTime = getCurTime(); setInterval(function() { render(ct); update(); }, 50); function getCurTime() { var time = new Date(); var curTime = endTime.getTime() - time.getTime(); return Math.round(curTime / 1000) > 0 ? Math.round(curTime / 1000) : 0; } function render(ct) { ct.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(nowTime / 3600); var minutes = parseInt((nowTime - hours * 3600) / 60); var seconds = parseInt(nowTime % 60); drawDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), ct); drawDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), ct); drawDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, ct); drawDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), ct); drawDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), ct); drawDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, ct); drawDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), ct); drawDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), ct); for (var i = 0; i < ball.length; i++) { ct.fillStyle = ball[i].color; ct.beginPath(); ct.arc(ball[i].x, ball[i].y, RADIUS, 0, 2 * Math.PI, true); ct.closePath(); ct.fill(); } } function drawDigit(x, y, num, ct) { ct.fillStyle = "#058"; 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) { ct.beginPath(); ct.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI); ct.fill(); ct.closePath(); } } } } function update() { var nextTime = getCurTime(); var nextHours = parseInt(nextTime / 3600); var nextMinutes = parseInt((nextTime - nextHours * 3600) / 60); var nextSeconds = parseInt(nextTime % 60); var curHours = parseInt(nowTime / 3600); var curMinutes = parseInt((nowTime - curHours * 3600) / 60); var curSeconds = parseInt(nowTime % 60); if (nextSeconds != curSeconds) { if (parseInt(curHours / 10) != parseInt(nextHours / 10)) { addBall(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10)); }; if (parseInt(curHours % 10) != parseInt(nextHours % 10)) { addBall(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10)); }; //分钟加小球 if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) { addBall(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10)); }; if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) { addBall(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10)); }; //秒钟加小球 if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) { addBall(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10)); }; if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) { addBall(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds % 10)); }; nowTime = nextTime; } updateBall() } function addBall(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 addOne = { x: x + j * 2 * (RADIUS + 1), y: y + i * 2 * (RADIUS + 1), r: RADIUS, g: 1.5 + Math.random(), vx: Math.pow(-1, Math.round(Math.random() * 1000)) * 4, vy: -10, color: colors[Math.floor(Math.random() * colors.length)] }; ball.push(addOne); } } } } function updateBall() { for (var i = 0; i < ball.length; i++) { ball[i].x += ball[i].vx; ball[i].y += ball[i].vy; ball[i].vy += ball[i].g; if (ball[i].y <= 748) { ball[i].y = 748; ball[i].vy = -ball[i].vy * 0.75; } } } function drawColorBall(ct) { for (var i = 0; i < ball.length; i++) { ct.beginPath(); ct.fillStyle = ball[i].color; ct.arc(ball[i].x, ball[i].y, ball[i].r, 0, 2 * Math.PI); ct.fill(); ct.closePath(); } } }
updateBoll里面的if判断写反了,应该是大于等于