本站所有内容仅限用于学习和研究目的,如有侵权请邮件与我们联系处理！
登录 注册
世上事本无难易，为之则易！

网站首页 网站源码 正文

404页面代码：即将上线：网站正在建设中...

曹操 2022-10-01 网站源码 4180 ℃ 61 评论 21306字 free 收藏

在做泛目录程序的很多时候，我们为了让网站备案保留的时间长一些，会使用我那个站历史的首页作为首页。

在无法获取到网站历史首页的情况下，我们只能通过给游客展现网站正在建设中的样式，使得游客看上去更加美观与正规。

404页面代码：即将上线：网站正在建设中...-第1张图片

实现上述效果的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <title>网站正在建设中.</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Montserrat);
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

        body {
            overflow: hidden;
        }

        h1 {
            margin: 0;
            font-family: 'Montserrat', sans-serif;
            font-size: 4em;
            color: #333;
            -webkit-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);
            -moz-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);
            text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);
            word-spacing: 16px;
        }

        p {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.4em;
            font-weight: bold;
            color: #222;
            text-shadow: 0 0 40px #FFFFFF, 0 0 30px #FFFFFF, 0 0 20px #FFFFFF;
        }

        .container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background: url('');
            background-size: cover;
        }

        .wrapper {
            width: 100%;
            min-height: 100%;
            height: auto;
            display: table;
        }

        .content {
            display: table-cell;
            vertical-align: middle;
        }

        .item {
            width: auto;
            height: auto;
            margin: 0 auto;
            text-align: center;
            padding: 8px;
        }

        canvas {
            position: absolute;
            z-index: 0;
            left: 0px;
            top: 0px;
            width: 100%;
        }

        .background {
            display: flex;
            z-index: 3;
            height: 100vh;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            font-family: 'Text Me One', sans-serif;
        }

        @media only screen and (min-width: 800px) {
            h1 {
                font-size: 6em;
            }

            p {
                font-size: 1.6em;
            }
        }

        @media only screen and (max-width: 320px) {
            h1 {
                font-size: 2em;
            }

            p {
                font-size: 1.2em;
            }
        }
    </style>
</head>

<body><canvas id='background' width='1280' height='642'></canvas>
    <div>
        <div>
            <div>
                <div>
                    <!-- Place your content here to have it be centered vertically and horizontally  -->
                    <h1>即将上线</h1>
                    <p>网站正在建设中...</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        const particles = [];
        for (let i = 0; i < 100; i++) {
            particles.push({
                x: Math.random() > 0.5 ? 0 : window.innerWidth,
                y: window.innerHeight / 2,
                vx: Math.random() * 2 - 1,
                vy: Math.random() * 2 - 1,
                history: [],
                size: 4 + Math.random() * 6,
                color: Math.random() > 0.5 ? '#ccc': Math.random() > 0.5 ? '#00174a': '#3c8dbc'
            });
        }
        const mouse = {
            x: window.innerWidth / 2,
            y: window.innerHeight / 2
        };
        const canvas = document.getElementById('background');
        if (canvas && canvas.getContext) {
            var context = canvas.getContext('2d');
            Initialize();
        }
        function Initialize() {
            canvas.addEventListener('mousemove', MouseMove, false);
            window.addEventListener('resize', ResizeCanvas, false);
            TimeUpdate();
            context.beginPath();
            ResizeCanvas();
        }
        function TimeUpdate(e) {
            context.clearRect(0, 0, window.innerWidth, window.innerHeight);
            for (let i = 0; i < particles.length; i++) {
                particles[i].x += particles[i].vx;
                particles[i].y += particles[i].vy;
                if (particles[i].x > window.innerWidth) {
                    particles[i].vx = -1 - Math.random();
                } else if (particles[i].x < 0) {
                    particles[i].vx = 1 + Math.random();
                } else {
                    particles[i].vx *= 1 + Math.random() * 0.005;
                }
                if (particles[i].y > window.innerHeight) {
                    particles[i].vy = -1 - Math.random();
                } else if (particles[i].y < 0) {
                    particles[i].vy = 1 + Math.random();
                } else {
                    particles[i].vy *= 1 + Math.random() * 0.005;
                }
                context.strokeStyle = particles[i].color;
                context.beginPath();
                for (var j = 0; j < particles[i].history.length; j++) {
                    context.lineTo(particles[i].history[j].x, particles[i].history[j].y);
                }
                context.stroke();
                particles[i].history.push({
                    x: particles[i].x,
                    y: particles[i].y
                });
                if (particles[i].history.length > 45) {
                    particles[i].history.shift();
                }
                for (var j = 0; j < particles[i].history.length; j++) {
                    particles[i].history[j].x += 0.01 * (mouse.x - particles[i].history[j].x) / (45 / j);
                    particles[i].history[j].y += 0.01 * (mouse.y - particles[i].history[j].y) / (45 / j);
                }
                let distanceFactor = DistanceBetween(mouse, particles[i]);
                distanceFactor = Math.pow(Math.max(Math.min(10 - distanceFactor / 10, 10), 2), 0.5);
                context.fillStyle = particles[i].color;
                context.beginPath();
                context.arc(particles[i].x, particles[i].y, particles[i].size * distanceFactor, 0, Math.PI * 2, true);
                context.closePath();
                context.fill();
            }
            requestAnimationFrame(TimeUpdate);
        }
        function MouseMove(e) {
            mouse.x = e.layerX;
            mouse.y = e.layerY;
        }
        function Draw(x, y) {
            context.strokeStyle = '#ff0000';
            context.lineWidth = 4;
            context.lineTo(x, y);
            context.stroke();
        }
        function ResizeCanvas(e) {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        function DistanceBetween(p1, p2) {
            const dx = p2.x - p1.x;
            const dy = p2.y - p1.y;
            return Math.sqrt(dx * dx + dy * dy);
        }
    </script>
    <div style='display:none;'><script type='text/javascript' src='https://s6.cnzz.com/z_stat.php?id=4350952&web_id=4350952'></script></div>
</body>
</html>

这样的页面还加载了js的动画效果，页面美观有趣。

Tags：泛目录，泛目录程序，单页面程序，

必看说明

  • 本站中所有被研究的素材与信息全部来源于互联网，版权争议与本站无关。
  • 本站文章或仅为文本内容原创，非程序原创。如有侵权、不妥之处，请联系站长第一时间删除。敬请谅解！
  • 本站所有内容严格遵守国家法律的条例，所有研究的算法技术均来源于搜索引擎公开默认允许用户研究使用的接口。
  • 阅读本文及获取资源前，请确保您已充分阅读并理解《访问曹操SEO网站需知：行为准则》。
  • 本站分享的任何工具、程序仅供学习参考编写架构，仅可在本地的虚拟机内断网测试，严禁联网运行或上传搭建！
  • 任何资源必须在下载后24个小时内，从电脑中彻底删除。不得传播或者用于其他任何用途！否则一切后果用户自负！
  • 转载请注明 : 文章转载自  站群程序 404页面代码：即将上线：网站正在建设中...
  • 本文标题：《404页面代码：即将上线：网站正在建设中...》
  • 本文链接：http://www.zqcx.cn/1800.html

猜你喜欢

已有61位网友发表了看法：

欢迎 你 发表评论:

网站分类
近期评论
文章归档
标签列表
站点信息
  • 文章总数:2025
  • 页面总数:7
  • 分类总数:46
  • 标签总数:339
  • 评论总数:9366
  • 浏览总数:5898972
聚合前沿SEO优化经验,分享开源站群系统及推送软件,免费外推工具与技术教程, 尽在站群程序！
Copyright @ 站群程序 | sitemap