貌似正文运行不了JS了...
打开浏览器Console，复制下面的js运行即可...
1 $('#canvas-container')[0].innerHTML=' '; 2 var WINDOW_WIDTH = 913; 3 var WINDOW_HEIGHT = 400; 4 var RADIUS = 7; //球半径 5 var NUMBER_GAP = 10; //数字之间的间隙 6 var u=0.65; //碰撞能量损耗系数 7 var context; //Canvas绘制上下文 8 9 var balls = []; //存储彩色的小球 10 const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色 11 12 var currentNums = []; //屏幕显示的8个字符 13 14 var digit = 15 [ 16 [ 17 [0,0,1,1,1,0,0], 18 [0,1,1,0,1,1,0], 19 [1,1,0,0,0,1,1], 20 [1,1,0,0,0,1,1], 21 [1,1,0,0,0,1,1], 22 [1,1,0,0,0,1,1], 23 [1,1,0,0,0,1,1], 24 [1,1,0,0,0,1,1], 25 [0,1,1,0,1,1,0], 26 [0,0,1,1,1,0,0] 27 ],//0 28 [ 29 [0,0,0,1,1,0,0], 30 [0,1,1,1,1,0,0], 31 [0,0,0,1,1,0,0], 32 [0,0,0,1,1,0,0], 33 [0,0,0,1,1,0,0], 34 [0,0,0,1,1,0,0], 35 [0,0,0,1,1,0,0], 36 [0,0,0,1,1,0,0], 37 [0,0,0,1,1,0,0], 38 [1,1,1,1,1,1,1] 39 ],//1 40 [ 41 [0,1,1,1,1,1,0], 42 [1,1,0,0,0,1,1], 43 [0,0,0,0,0,1,1], 44 [0,0,0,0,1,1,0], 45 [0,0,0,1,1,0,0], 46 [0,0,1,1,0,0,0], 47 [0,1,1,0,0,0,0], 48 [1,1,0,0,0,0,0], 49 [1,1,0,0,0,1,1], 50 [1,1,1,1,1,1,1] 51 ],//2 52 [ 53 [1,1,1,1,1,1,1], 54 [0,0,0,0,0,1,1], 55 [0,0,0,0,1,1,0], 56 [0,0,0,1,1,0,0], 57 [0,0,1,1,1,0,0], 58 [0,0,0,0,1,1,0], 59 [0,0,0,0,0,1,1], 60 [0,0,0,0,0,1,1], 61 [1,1,0,0,0,1,1], 62 [0,1,1,1,1,1,0] 63 ],//3 64 [ 65 [0,0,0,0,1,1,0], 66 [0,0,0,1,1,1,0], 67 [0,0,1,1,1,1,0], 68 [0,1,1,0,1,1,0], 69 [1,1,0,0,1,1,0], 70 [1,1,1,1,1,1,1], 71 [0,0,0,0,1,1,0], 72 [0,0,0,0,1,1,0], 73 [0,0,0,0,1,1,0], 74 [0,0,0,1,1,1,1] 75 ],//4 76 [ 77 [1,1,1,1,1,1,1], 78 [1,1,0,0,0,0,0], 79 [1,1,0,0,0,0,0], 80 [1,1,1,1,1,1,0], 81 [0,0,0,0,0,1,1], 82 [0,0,0,0,0,1,1], 83 [0,0,0,0,0,1,1], 84 [0,0,0,0,0,1,1], 85 [1,1,0,0,0,1,1], 86 [0,1,1,1,1,1,0] 87 ],//5 88 [ 89 [0,0,0,0,1,1,0], 90 [0,0,1,1,0,0,0], 91 [0,1,1,0,0,0,0], 92 [1,1,0,0,0,0,0], 93 [1,1,0,1,1,1,0], 94 [1,1,0,0,0,1,1], 95 [1,1,0,0,0,1,1], 96 [1,1,0,0,0,1,1], 97 [1,1,0,0,0,1,1], 98 [0,1,1,1,1,1,0] 99 ],//6100 [101 [1,1,1,1,1,1,1],102 [1,1,0,0,0,1,1],103 [0,0,0,0,1,1,0],104 [0,0,0,0,1,1,0],105 [0,0,0,1,1,0,0],106 [0,0,0,1,1,0,0],107 [0,0,1,1,0,0,0],108 [0,0,1,1,0,0,0],109 [0,0,1,1,0,0,0],110 [0,0,1,1,0,0,0]111 ],//7112 [113 [0,1,1,1,1,1,0],114 [1,1,0,0,0,1,1],115 [1,1,0,0,0,1,1],116 [1,1,0,0,0,1,1],117 [0,1,1,1,1,1,0],118 [1,1,0,0,0,1,1],119 [1,1,0,0,0,1,1],120 [1,1,0,0,0,1,1],121 [1,1,0,0,0,1,1],122 [0,1,1,1,1,1,0]123 ],//8124 [125 [0,1,1,1,1,1,0],126 [1,1,0,0,0,1,1],127 [1,1,0,0,0,1,1],128 [1,1,0,0,0,1,1],129 [0,1,1,1,0,1,1],130 [0,0,0,0,0,1,1],131 [0,0,0,0,0,1,1],132 [0,0,0,0,1,1,0],133 [0,0,0,1,1,0,0],134 [0,1,1,0,0,0,0]135 ],//9136 [137 [0,0,0,0],138 [0,0,0,0],139 [0,1,1,0],140 [0,1,1,0],141 [0,0,0,0],142 [0,0,0,0],143 [0,1,1,0],144 [0,1,1,0],145 [0,0,0,0],146 [0,0,0,0]147 ]//:148 ];149 150 function drawDatetime(cxt){151 var nums = [];152 153 context.fillStyle="#005eac"154 var date = new Date();155 var offsetX = 70, offsetY = 30;156 var hours = date.getHours();157 var num1 = Math.floor(hours/10);158 var num2 = hours%10;159 nums.push({num: num1});160 nums.push({num: num2});161 nums.push({num: 10}); //冒号162 var minutes = date.getMinutes();163 var num1 = Math.floor(minutes/10);164 var num2 = minutes%10;165 nums.push({num: num1});166 nums.push({num: num2});167 nums.push({num: 10}); //冒号168 var seconds = date.getSeconds();169 var num1 = Math.floor(seconds/10);170 var num2 = seconds%10;171 nums.push({num: num1});172 nums.push({num: num2});173 174 for(var x = 0;x (WINDOW_HEIGHT-RADIUS)){241 ball.offsetY= WINDOW_HEIGHT-RADIUS;242 ball.vy=-ball.vy*u;243 }244 if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){245 balls[i]=balls[index];246 i++;247 }248 }249 //去除出边界的球250 for(;i