Der Hier benutze Code

    


<canvas id="cas" width="900" height="600">
<canvas id="bgcas" width="900" height="600">
<script>
  var numData = [
    "1111/1001/1001/1001/1001/1001/1111", //0
    "0001/0001/0001/0001/0001/0001/0001", //1
    "1111/0001/0001/1111/1000/1000/1111", //2
    "1111/0001/0001/1111/0001/0001/1111", //3
    "1001/1001/1001/1111/0001/0001/0001", //4
    "1111/1000/1000/1111/0001/0001/1111", //5
    "1111/1000/1000/1111/1001/1001/1111", //6
    "1111/0001/0001/0001/0001/0001/0001", //7
    "1111/1001/1001/1111/1001/1001/1111", //8
    "1111/1001/1001/1111/0001/0001/1111", //9
    "0000/0000/0010/0000/0010/0000/0000" //:
  ]

  var canvas = document.getElementById("cas"),
      bgcanvas = document.getElementById("bgcas"),
      ctx = canvas.getContext('2d'),
      bgctx = bgcanvas.getContext("2d");

  bgcanvas.width = canvas.width;
  bgcanvas.height = canvas.height;

  var P_radius = 6, Gravity = 9.8;
  var Particle = function() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.color = "";
    this.visible = false;
    this.drop = false;
  }
  var lastColor;
  Particle.prototype = {
    constructors: Particle,
    paint: function() {		//????
      if (lastColor !== this.color) {
        ctx.fillStyle = lastColor = this.color;
      }
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
      ctx.fill();
    },
    reset: function(x, y, color) {		//??
      this.x = x;
      this.y = y;
      this.vx = 0;
      this.vy = 0;
      this.color = color;
      this.visible = true;
      this.drop = false;
      this.radius = 0;
    },
    isDrop: function() {		//??
      this.drop = true;
      var vx = Math.random() * 15 + 10
      var vy = -Math.random() * 50 + 10;
      this.vx = Math.random() >= 0.5 ? -vx : vx;
      this.vy = vy;
    },
    update: function(time) {		//??????
      if (this.drop) {
        this.x += this.vx * time;
        this.y += this.vy * time;

        var vy = this.vy + Gravity * time;

        if (this.y >= canvas.height - P_radius) {
          this.y = canvas.height - P_radius
          vy = -vy * 0.8;
        }

        this.vy = vy;

        if (this.x < -P_radius || this.x > canvas.width + P_radius || this.y > canvas.height + P_radius) {
          this.visible = false;
        }
      }

      if (this.radius < P_radius) {
        this.radius += 0.5;
      }
    }
  }

  window.RAF = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
  })();

  var timeCount_0 = 0, timeCount_1 = 0, particles = [];
  function initAnimate() {
    for (var i = 0; i < 200; i++) {
      var p = new Particle();
      particles.push(p);
    }

    timeCount_0 = new Date();
    timeCount_1 = new Date();

    drawBg();

    setTime(timeCount_0);
    animate();
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var timeCount_2 = new Date();

    if (timeCount_1 - timeCount_0 >= 1000) {
      setTime(timeCount_1);
      timeCount_0 = timeCount_1;
    }

    particles.forEach(function(p) {
      if (p.visible) {
        p.update(16 / 70);
        p.paint();
      }
    });

    timeCount_1 = timeCount_2;

    RAF(animate)
  }


  var X_J = 10;       //????
  var xjg = 20;       //?????????
  var yjg = 22;       //???????
  function drawBg() {
    var tx = (canvas.width - ((P_radius * 2 + X_J) * 4 * 8 + 7 * xjg)) / 2;
    for (var i = 0; i < 8; i++) {
      var ty = (canvas.height - ((P_radius + yjg) * 6)) / 2;
      for (var j = 0; j < numData[0].length; j++) {
        var tt = numData[0].charAt(j);
        if (tt === "/") {
          ty += yjg;
        } else if (tt == 1 || tt == 0) {
          var x = tx + j % 5 * (P_radius * 2 + X_J),
              y = ty;
          bgctx.beginPath();
          bgctx.arc(x, y, P_radius, 0, 2 * Math.PI);
          bgctx.fillStyle = "#FFF";
          bgctx.fill();
        }
      }
      tx += xjg + 4 * (P_radius * 2 + X_J);
    }
  }

  var lastDate;
  function setTime(time) {
    var h = time.getHours() + "",
        m = time.getMinutes() + "",
        s = time.getSeconds() + "";
    h = h.length === 1 ? "0" + h : h;
    m = m.length === 1 ? "0" + m : m;
    s = s.length === 1 ? "0" + s : s;

    var nowdate = h + ":" + m + ":" + s;

    var color = "";
    var i = 0;

//        ????????????????????
    if (lastDate) {
      for (var k = 0; k < nowdate.length; k++) {
        if (lastDate.charAt(k) !== nowdate.charAt(k)) {
          i = k;
          break;
        }
      }
    }
    lastDate = nowdate;

    var tx = (canvas.width - ((P_radius * 2 + X_J) * 4 * 8 + 7 * xjg)) / 2; //?????x??
    var ty = (canvas.height - ((P_radius + yjg) * 6)) / 2;  //?????y??
//        ??????
    for (; i < nowdate.length; i++) {
      var charX = tx + i * (xjg + 4 * (P_radius * 2 + X_J));   //??????X??
      var charY = ty;

      var timeChar = nowdate.charAt(i);
      var text = numData[timeChar === ":" ? 10 : +timeChar];     //?????????

      if (i < 3) {
        color = "#279548";
      } else if (i < 6) {
        color = "#D65050";
      } else {
        color = "#797C17";
      }

      for (var j = 0; j < text.length; j++) {
        var tt = text.charAt(j);
        if (tt === "/") {
          charY += yjg;
        } else {
          var x = charX + j % 5 * (P_radius * 2 + X_J);
          var y = charY;
          var pp = null;
          var usefullp = null;

          for (var ref = 0; ref < particles.length; ref++) {
            var p = particles[ref];
            if (p.visible && p.x === x && p.y === y) {
              pp = p;
            } else if (!p.visible && !usefullp) {
              usefullp = p;
            }
          }

          if (pp && tt == 0) {
            pp.isDrop();
          } else if (!pp && tt == 1) {
            usefullp.reset(x, y, color);
          }
        }
      }
    }
  }

  initAnimate()
</script>