本站自用的404页面代码分享

iT日记源码模板 2025-05-29 864
本站自用的404页面代码分享-第1张图片-iT日记
功能介绍：可以自主选择返回网站首页或上一页，如果不选择，10秒后自动返回网站首页。背景带粒子特效。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 页面不存在 - iT日记</title>
    <style>
        body {
            margin: 0;
            background: #0f0f23;
            color: #fff;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .container {
            text-align: center;
            z-index: 10;
        }
        h1 {
            font-size: 5rem;
            margin: 0;
            text-shadow: 0 0 10px #0ff;
            animation: glow 2s infinite alternate;
        }
        p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }
        .buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }
        button {
            background: transparent;
            color: #0ff;
            border: 2px solid #0ff;
            padding: 0.8rem 2rem;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 5px;
        }
        button:hover {
            background: #0ff;
            color: #000;
            box-shadow: 0 0 15px #0ff;
        }
        #countdown {
            margin-top: 1rem;
            font-size: 1rem;
            color: #aaa;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        @keyframes glow {
            from { text-shadow: 0 0 10px #0ff; }
            to { text-shadow: 0 0 20px #0ff, 0 0 30px #0ff; }
        }
    </style>
</head>
<body>
    <canvas id="particles"></canvas>
    <div>
        <h1>404</h1>
        <p>页面不存在或已被移除</p>
        <div>
            <button id="goBack">返回上一页</button>
            <button id="goHome">返回首页</button>
        </div>
        <div id="countdown">10秒后自动返回...</div>
    </div>

    <script>
        // 粒子动画
        const canvas = document.getElementById('particles');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particles = [];
        const particleCount = 100;

        for (let i = 0; i < particleCount; i++) {
            particles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                size: Math.random() * 3 + 1,
                speedX: Math.random() * 1 - 0.5,
                speedY: Math.random() * 1 - 0.5,
                color: `rgba(0, 255, 255, ${Math.random() * 0.5 + 0.1})`
            });
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i < particles.length; i++) {
                const p = particles[i];
                
                ctx.fillStyle = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                ctx.fill();
                
                p.x += p.speedX;
                p.y += p.speedY;
                
                if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
                if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
            }
            
            requestAnimationFrame(animateParticles);
        }

        animateParticles();

        // 返回逻辑
        const goBackBtn = document.getElementById('goBack');
        const goHomeBtn = document.getElementById('goHome');
        const countdownEl = document.getElementById('countdown');
        
        let seconds = 10;
        const timer = setInterval(() => {
            seconds--;
            countdownEl.textContent = `${seconds}秒后自动返回...`;
            
            if (seconds <= 0) {
                clearInterval(timer);
                autoRedirect();
            }
        }, 1000);

        function autoRedirect() {
            const referrer = document.referrer;
            const currentDomain = window.location.hostname;
            
            if (referrer && new URL(referrer).hostname === currentDomain) {
                window.history.back();
            } else {
                window.location.href = 'https://www.itriji.com/'; // 替换为你的首页URL
            }
        }

        goBackBtn.addEventListener('click', () => {
            clearInterval(timer);
            window.history.back();
        });

        goHomeBtn.addEventListener('click', () => {
            clearInterval(timer);
            window.location.href = 'https://www.itriji.com/'; // 替换为你的首页URL
        });

        // 窗口大小调整时重设画布
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>
标签： 404 html 错误页面 iT日记
本文地址： https://www.itriji.com/works/1748517402-y.html
文章来源： iT日记