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();            }        }    }}

我另添加了三位的天数，时钟可以走但是没有小球的效果