下面是js代碼，html 和digit.js代碼和老師給的一樣，var WINDOW_WIDTH = 1388;var WINDOW_HEIGHT = 768;var RADIUS = 8;var MARGIN_TOP = 270;var MARGIN_LEFT = 10;var MARGIN_TOP_YEAR = 50;// var curShowTimeSeconds = 0;var balls = [];const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#BB8800", "#FF4444", "#CC0000"];window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = WINDOW_WIDTH; canvas.height = WINDOW_HEIGHT; setInterval( function(){ render(context); curShowTimeSeconds = getCurShowtimeSeconds(); update(); },50 )}function update(){ var nextShowTimeSeconds = getCurShowtimeSeconds(); var nextHours = nextShowTimeSeconds.getHours(); var nextMinutes = extShowTimeSeconds.getMinutes(); var nextSeconds = extShowTimeSeconds.getSeconds(); var curHours = curShowTimeSeconds.getHours(); var curMinutes = curShowTimeSeconds.getMinutes(); var curSeconds = getCurShowtimeSeconds.getSeconds(); if(nextSeconds != curSeconds){//hours if(parseInt(curHours/10) != parseInt(nextHours/10)){ addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours/10)); } if(parseInt(curHours%10) != parseInt(nextHours%10)){ addBalls(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curHours%10)); }//minutes if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){ addBalls(MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10)); } if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){ addBalls(MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10)); }//seconds if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){ addBalls(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10)); } if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){ addBalls(MARGIN_LEFT + 94*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10)); } getCurShowtimeSeconds = nextShowTimeSeconds; } updateBalls();}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(), ?// 1.5~2.5 vx: Math.pow(-1, Math.ceil(Math.random()*1000)) * 4, ?//Math.pow()--是正1或-1， pow(a,b) --- a的b次方 vy: -5, ? color: colors[Math.floor(Math.random()*colors.length)], ? ?} ? ?balls.push(aBall); }}function updateBalls(){ for(var i=0; i<balls.length; i++){ balls[i].x += balls[i].vx; balls[i].y += balls[i].vy; balls[i].vy += balls[i].g; if(balls[i].y >= WINDOW_HEIGHT - RADIUS){ balls[i].y = WINDOW_HEIGHT - RADIUS; balls[i].vy = -balls[i].vy*0.75; } }}function getCurShowtimeSeconds(){ var d = new Date(); return d;}function render(cxt){ cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT); var month = curShowTimeSeconds.getMonth() + 1; var date = curShowTimeSeconds.getDate(); var hours = curShowTimeSeconds.getHours(); var minutes = curShowTimeSeconds.getMinutes(); var seconds = curShowTimeSeconds.getSeconds(); //year renderDigit(MARGIN_LEFT, MARGIN_TOP_YEAR, 2, cxt); renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP_YEAR, 0, cxt); renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP_YEAR, 1, cxt); renderDigit(MARGIN_LEFT + 45*(RADIUS+1), MARGIN_TOP_YEAR, 6, cxt); //month renderDigit(MARGIN_LEFT + 67*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(month/10), cxt); renderDigit(MARGIN_LEFT + 83*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(month%10), cxt); //date renderDigit(MARGIN_LEFT + 105*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(date/10), cxt); renderDigit(MARGIN_LEFT + 120*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(date%10), cxt); //hours minutes seconds renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt); renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt); renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10, cxt); ?//: renderDigit(MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt); renderDigit(MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt); renderDigit(MARGIN_LEFT + 69*(RADIUS+1), MARGIN_TOP, 10, cxt); ?//: renderDigit(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt); renderDigit(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt); for(var i=0; i<balls.length; i++){ cxt.fillStyle = balls[i].color; cxt.beginPath(); cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI) cxt.closePath(); cxt.fill(); }}function renderDigit(x, y, num, cxt){ cxt.fillStyle = "rgb(0, 102, 153)"; 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){ cxt.beginPath(); //centerX: x + j*2*(R+1) + (R+1) //centerY: y + i*2*(R+1) + (R+1) cxt.arc(x + j*2*(RADIUS+1) + (RADIUS+1), y + i*2*(RADIUS+1) + (RADIUS+1), RADIUS, 0, 2*Math.PI); cxt.closePath(); cxt.fill(); } } }}