响应式设计：
使用视口元标签和媒体查询、 自适应不同屏幕尺寸 、 移动端优化布局和字体大小
视觉设计：
简洁大气的404数字展示、 渐变按钮和微交互效果、 适当的阴影和动画提升用户体验
功能实现：
10秒倒计时自动跳转、 按钮立即跳转功能、 点击按钮时显示状态提示、 跳转前清除定时器
优化细节：
按钮防重复点击（点击后禁用）、 0.5秒延迟确保提示可见、 清晰的代码注释、 友好的错误提示文案、
可定制部分：
修改 redirectToHome 函数中的跳转地址、 调整颜色、字体大小等样式变量、 修改倒计时时间（修改 count 初始值）、 自定义提示文案和按钮文字
使用时需要将代码中的 window.location.href = '/'; 替换为实际的网站首页地址，并根据企业品牌色调整颜色方案。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面未找到 - 企业名称</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #f0f2f5;
color: #333;
line-height: 1.6;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
padding: 2rem;
max-width: 600px;
}
h1 {
font-size: 8rem;
color: #2c3e50;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #34495e;
}
p {
font-size: 1.1rem;
margin-bottom: 2rem;
color: #7f8c8d;
}
.countdown {
font-size: 1.2rem;
color: #e74c3c;
margin-bottom: 2rem;
}
.btn {
display: inline-block;
padding: 12px 30px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 25px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0,0,0,0.2);
}
.btn:active {
transform: translateY(0);
}
@media (max-width: 768px) {
h1 {
font-size: 6rem;
}
h2 {
font-size: 1.5rem;
}
.container {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<h2>哎呀！页面找不到了</h2>
<p>您访问的页面可能已被移除、暂时不可用或输入了错误的地址。</p>
<div class="countdown"><span id="count">10</span>秒后自动返回首页</div>
<button class="btn" id="jumpBtn">立即返回首页</button>
</div>
<script>
// 倒计时和跳转功能
let count = 10;
const countElement = document.getElementById('count');
const jumpBtn = document.getElementById('jumpBtn');
let timer = null;
function startCountdown() {
timer = setInterval(() => {
count--;
countElement.textContent = count;
if(count <= 0) {
clearInterval(timer);
redirectToHome();
}
}, 1000);
}
function redirectToHome() {
window.location.href = '/'; // 修改为你的首页地址
}
// 按钮点击事件
jumpBtn.addEventListener('click', () => {
clearInterval(timer);
jumpBtn.textContent = '正在立即跳转...';
jumpBtn.disabled = true;
setTimeout(redirectToHome, 500); // 0.5秒后执行跳转
});
// 初始化倒计时
startCountdown();
</script>
</body>
</html>实际效果：
