Edit in JSRun

var colorAry = ["#3BE", "#09C", "A6C", "#93C", "#690", "#FB3", "#F80", "#F44", "#C00"];
var	dataAry = [
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//0
  [
    [0, 0, 0, 1, 1, 0, 0],
    [0, 1, 1, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [1, 1, 1, 1, 1, 1, 1]
  ],//1
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 1, 1, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1]
  ],//2
  [
    [1, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//3
  [
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 1, 0],
    [0, 0, 1, 1, 1, 1, 0],
    [0, 1, 1, 0, 1, 1, 0],
    [1, 1, 0, 0, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 1, 1]
  ],//4
  [
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//5
  [
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 1, 1, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 0, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//6
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//7
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//8
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ],//9
  [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ]//:
];


var wnz = {};
function init () {
  var canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  wnz.context = canvas.getContext('2d');
  wnz.x = 50;
  wnz.y = 100;
  wnz.r = 28;
  wnz.d = 2;
  wnz.balls = [];
}

function getMsec (d) {     //返回距 1970 年 1 月 1 日 0时 0分 0秒 之间的毫秒数;
  return d.getTime() + 8 * 3600 * 1000;  //getTime()返回距上午8时   的毫秒数;
}

function leftPad (num) {             //将一位数字补为两位,并将number转为string
  return num < 10 ? "0" + num : num + "";
}

function drowPane (lan, num) {
  var cxt = wnz.context;

  var len = dataAry[num].length,
    len2 = dataAry[num][0].length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len2; j++) {
      if (dataAry[num][i][j] == 1) {
        cxt.fillStyle = "#33C";
        cxt.beginPath();
        cxt.arc(wnz.x + lan + (wnz.r + wnz.d) * (j + 0.5), wnz.y + (wnz.r + wnz.d) * (i + 0.5), wnz.r / 2, 0, 2 * Math.PI);
        cxt.closePath();
        cxt.fill();
      }
    }
  }
}

function addBalls (lan, num) {
  var cxt = wnz.context;

  var len = dataAry[num].length,
    len2 = dataAry[num][0].length;

  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len2; j++) {
      if (dataAry[num][i][j] == 1) {
        var ball = {
          x: wnz.x + lan + (wnz.r + wnz.d) * (j + 0.5),
          y: wnz.y + (wnz.r + wnz.d) * (i + 0.5),
          vx: (Math.floor(Math.random() * 2) * 2 - 1) * 8,
          vy: -5,
          g: Math.ceil(Math.random() * 3),
          color: colorAry[Math.floor(colorAry.length * Math.random())]
        };
        wnz.balls.push(ball);
      }
    }
  }
}

function render (date) {
  var cxt = wnz.context,
    second = leftPad(date.getSeconds()),
    minute = leftPad(date.getMinutes()),
    hour = leftPad(date.getHours()),
    dateAry = [hour, ":", minute, ":", second].join("").split(""),
    data,
    lan = 0;  //矩阵长度累加器,用于定位矩阵x轴
  cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);
  for (var i = 0; i < 8; i++) {
    data = dateAry[i] == ":" ? 10 : parseInt(dateAry[i]);
    drowPane(lan, data);
    lan += (dataAry[data][0].length + 1) * (wnz.r + wnz.d);  // +1矩阵间的距离为一个方格长度
  }
}

function update (date) {
  var oldSec = date.getSeconds(),
    nexSec = parseInt((getMsec(date) + 50) / 1000) % 60,
    len = wnz.balls.length,
    cxt = wnz.context,
    del = [],
    delLen;
  if (oldSec != nexSec) {    //限定每隔一秒添加一次散落小球
    var second = leftPad(date.getSeconds()),
      minute = leftPad(date.getMinutes()),
      hour = leftPad(date.getHours()),
      oldAry = [hour, ":", minute, ":", second].join("").split(""),
      next = date.setTime(date.getTime() + 50),
      nextSecond = leftPad(date.getSeconds()),
      nextMinute = leftPad(date.getMinutes()),
      nextHour = leftPad(date.getHours()),
      nextAry = [nextHour, ":", nextMinute, ":", nextSecond].join("").split(""),
      data,
      lan = 0;
    for (var i = 0; i < 8; i++) {
      data = nextAry[i] == ":" ? 10 : parseInt(nextAry[i]);
      if (oldAry[i] != nextAry[i]) {      //变化的数字   添加散落小球
        addBalls(lan, data);
      }
      lan += (dataAry[data][0].length + 1) * (wnz.r + wnz.d);
    }
  }
  for (var j = 0; j < len; j++) {
    cxt.beginPath();              //绘制散落小球

    cxt.fillStyle = wnz.balls[j].color;
    cxt.arc(wnz.balls[j].x, wnz.balls[j].y, wnz.r / 2, 0, 2 * Math.PI )
    cxt.fill();

    cxt.closePath();

    wnz.balls[j].x += wnz.balls[j].vx;   //更新散落小球 位置
    wnz.balls[j].y += wnz.balls[j].vy;
    wnz.balls[j].vy += wnz.balls[j].g;

    if (wnz.balls[j].x > window.innerWidth + wnz.r / 2 || wnz.balls[j].x < 0 - wnz.r / 2) {
      del.push(j);           //记录滚出显示区域的小球
    } else if (wnz.balls[j].y >= window.innerHeight - (wnz.r + wnz.d) / 2) {
      wnz.balls[j].y = window.innerHeight - (wnz.r + wnz.d) / 2;
      wnz.balls[j].vy = -1 * wnz.balls[j].vy * 0.5;   //触底小球反弹
    }
  }
  delLen = del.length
  if (delLen > 0) {      //将记录下的滚出显示区域的小球删除
    del.reverse();
    for (var k = 0; k < delLen; k++) {
      wnz.balls.splice(del[k], 1);
    }
    del = [];
  }
}

window.onload = function () {
  init();
  setInterval(function () {
    var date = new Date();
    render(date);
    update(date);
  }, 50);
}
<canvas id="canvas"></canvas>
html, body, canvas {margin: 0; padding: 0;}
#canvas {border: 0; display: block; }