貌似正文运行不了JS了...
打开浏览器Console，复制下面的js运行即可...
1 $('#canvas-container')[0].innerHTML='<canvas id="canvas"></canvas>'; 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 ],//6 100 [ 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 ],//7 112 [ 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 ],//8 124 [ 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 ],//9 136 [ 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<nums.length;x++){ 175 nums[x].offsetX = offsetX; 176 offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt); 177 //两个数字连一块，应该间隔一些距离 178 if(x<nums.length-1){ 179 if((nums[x].num!=10) &&(nums[x+1].num!=10)){ 180 offsetX+=NUMBER_GAP; 181 } 182 } 183 } 184 185 //说明这是初始化 186 if(currentNums.length ==0){ 187 currentNums = nums; 188 }else{ 189 //进行比较 190 for(var index = 0;index<currentNums.length;index++){ 191 if(currentNums[index].num!=nums[index].num){ 192 //不一样时，添加彩色小球 193 addBalls(nums[index]); 194 currentNums[index].num=nums[index].num; 195 } 196 } 197 } 198 renderBalls(cxt); 199 updateBalls(); 200 201 return date; 202 } 203 204 function addBalls (item) { 205 var num = item.num; 206 var numMatrix = digit[num]; 207 for(var y = 0;y<numMatrix.length;y++){ 208 for(var x = 0;x<numMatrix[y].length;x++){ 209 if(numMatrix[y][x]==1){ 210 var ball={ 211 offsetX:item.offsetX+RADIUS+RADIUS*2*x, 212 offsetY:30+RADIUS+RADIUS*2*y, 213 color:colors[Math.floor(Math.random()*colors.length)], 214 g:1.5+Math.random(), 215 vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(), 216 vy:-5 217 } 218 balls.push(ball); 219 } 220 } 221 } 222 } 223 224 function renderBalls(cxt){ 225 for(var index = 0;index<balls.length;index++){ 226 cxt.beginPath(); 227 cxt.fillStyle=balls[index].color; 228 cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI); 229 cxt.fill(); 230 } 231 } 232 233 function updateBalls () { 234 var i =0; 235 for(var index = 0;index<balls.length;index++){ 236 var ball = balls[index]; 237 ball.offsetX += ball.vx; 238 ball.offsetY += ball.vy; 239 ball.vy+=ball.g; 240 if(ball.offsetY > (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<balls.length;i++){ 251 balls.pop(); 252 } 253 } 254 255 function drawSingleNumber(offsetX, offsetY, num, cxt){ 256 var numMatrix = digit[num]; 257 for(var y = 0;y<numMatrix.length;y++){ 258 for(var x = 0;x<numMatrix[y].length;x++){ 259 if(numMatrix[y][x]==1){ 260 cxt.beginPath(); 261 cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI); 262 cxt.fill(); 263 } 264 } 265 } 266 cxt.beginPath(); 267 offsetX += numMatrix[0].length*RADIUS*2; 268 return offsetX; 269 } 270 271 var canvas = document.getElementById("canvas"); 272 canvas.width=WINDOW_WIDTH; 273 canvas.height=WINDOW_HEIGHT; 274 context = canvas.getContext("2d"); 275 276 //记录当前绘制的时刻 277 var currentDate = new Date(); 278 279 setInterval(function(){ 280 //清空整个Canvas，重新绘制内容 281 context.clearRect(0, 0, context.canvas.width, context.canvas.height); 282 drawDatetime(context); 283 }, 50)