一个不错的404页面源码

预览地址: https://www.fyovo.com/404page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>404页未找到</title>

        <style>
            html,body {
              margin:0;
              padding:0;
            }
            canvas {
              display:block;
            }
        </style>
    </head>
    <body>

        <div></div>

        <script>
            var canvas = document.createElement('canvas');
            var height = canvas.height = window.innerHeight;
            var width = canvas.width = window.innerWidth;
            var ctx = canvas.getContext('2d');
            document.body.appendChild(canvas);
      
            function random(min,max)
            {
                return Math.random()*(max-min+1)+min;
            }
      
            function range_map(value,in_min, in_max, out_min, out_max) {
              return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
            }
      
            var word_arr = [];
            var txt_min_size = 5;
            var txt_max_size = 25;
            var keypress = false;
            var acclerate = 2;
            for (var i = 0; i < 25; i++) {
              word_arr.push({
                x : random(0,width),
                y : random(0,height),
                text : '完了, 404了',
                size : random(txt_min_size,txt_max_size)
              });
      
              word_arr.push({
                x : random(0,width),
                y : random(0,height),
                text : '服务器懵逼了@_@ 页面没有了',
                size : random(txt_min_size,txt_max_size)
              });
      
      
              word_arr.push({
                x : random(0,width),
                y : random(0,height),
                text : '老哥牛逼! 我都访问不到这个页面',
                size : random(txt_min_size,txt_max_size)
              });
              
              word_arr.push({
                x : random(0,width),
                y : random(0,height),
                text : '这输入的Url太有想象力了...',
                size : random(txt_min_size,txt_max_size)
              });
      
              word_arr.push({
                x : random(0,width),
                y : random(0,height),
                text : '404 Not Found',
                size : Math.floor(random(txt_min_size,txt_max_size))
              });
            }
      
            function render()
            {
              ctx.fillStyle = "rgba(0,0,0,1)";
              ctx.fillRect(0,0,width,height);
      
              ctx.fillStyle = "#fff";
              for (var i = 0; i < word_arr.length; i++) {
                ctx.font = word_arr[i].size+"px sans-serif";
                var w = ctx.measureText(word_arr[i].text);
                ctx.fillText(word_arr[i].text,word_arr[i].x,word_arr[i].y);
      
                if(keypress)
                {
                  word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,4) * acclerate;
                }
                else {
                  word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,3);
                }
      
                if(word_arr[i].x >= width)
                {
                  word_arr[i].x = -w.width*2;
                  word_arr[i].y = random(0,height);
                  word_arr[i].size =  Math.floor(random(txt_min_size,txt_max_size));
      
                }
              }
      
              ctx.fill();
      
              requestAnimationFrame(render);
            }
      
            render();
      
            window.addEventListener('keydown',function(){
              keypress = true;
            },true);
            window.addEventListener('keyup',function(){
              keypress = false;
            },true);
        </script>
        <script language="javascript" type="text/javascript">
            var i = 5; 
            var intervalid; 
            intervalid = setInterval("fun()", 1000); 
            function fun() { 
              if (i == 0) { 
                window.location.href = "/"; 
                clearInterval(intervalid); 
              } 
              i--; 
            }
        </script>
    </body>
</html>

备忘用.

风影OvO

风影OvO, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权 | 转载请注明原文链接

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐