功能介绍：可以自主选择返回网站首页或上一页，如果不选择，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>文章来源：
iT日记
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
