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

我另添加了三位的天數(shù)，時(shí)鐘可以走但是沒(méi)有小球的效果