【转载】html分享之同创科技404页面代码

分享一个可以当做网站404页面个性化的代码,如果网页打开报错,就可以跳转到该页面

页面展示




页面代码

<!DOCTYPE html><html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>同创科技404页面</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      body {

        background: black;

      }

      canvas {

        display: block;

      }

    </style>

  </head>

  <body>

    <canvas id="ad"></canvas>

    <script>

      var ad = document.getElementById("ad");

      var ctx = ad.getContext("2d");

      ad.height = window.innerHeight;

      ad.width = window.innerWidth;

      var chinese = "同创科技";

      chinese = chinese.split("");

      var font_size = 10;

      var columns = ad.width / font_size;

      var drops = [];

      for (var x = 0; x < columns; x++) drops[x] = 1;

      function draw() {

        ctx.fillStyle = "rgba(0, 0, 0, 0.05)";

        ctx.fillRect(0, 0, ad.width, ad.height);

        ctx.fillStyle = "#0F0";

        ctx.font = font_size + "px arial";

        for (var i = 0; i < drops.length; i++) {

          var text = chinese[Math.floor(Math.random() * chinese.length)];

          ctx.fillText(text, i * font_size, drops[i] * font_size);

          if (drops[i] * font_size > ad.height && Math.random() > 0.975)

            drops[i] = 0;

          drops[i]++;

        }

      }

      setInterval(draw, 50);

    </script>

  </body>

</html>