给你一套2025 最新、极简高颜值、自适应、无任何依赖的网站维护 + 404 共用单页 HTML 源码，直接保存即用，支持一键切换模式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>站点维护中 | 404 Not Found</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html,
body {
height: 100%;
background: #f7f8fc;
display: flex;
align-items: center;
justify-content: center;
color: #333;
}
.container {
text-align: center;
padding: 0 20px;
max-width: 500px;
width: 100%;
}
.logo {
font-size: 80px;
color: #409eff;
margin-bottom: 20px;
}
h1 {
font-size: 32px;
margin-bottom: 12px;
color: #222;
}
p {
font-size: 16px;
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}
.count {
color: #409eff;
font-weight: bold;
}
.btn {
display: inline-block;
padding: 12px 30px;
background: #409eff;
color: #fff;
border-radius: 6px;
text-decoration: none;
font-size: 15px;
transition: 0.3s;
}
.btn:hover {
background: #338eef;
}
/* 维护模式隐藏404 */
.maintain .logo {
display: none;
}
</style>
</head>
<body>
<div class="container" id="box">
<div class="logo">404</div>
<h1 id="title">页面未找到</h1>
<p id="desc">您访问的页面不存在或已被移除。<br>将在 <span class="count" id="time">5</span> 秒后自动返回首页</p>
<a href="/" class="btn">返回首页</a>
</div>
<script>
// ================== 配置区 ==================
const mode = "404"; // 404 或 maintain
const countdown = 5; // 倒计时秒数
const home = "/"; // 首页地址
// ============================================
const text = {
404: {
title: "页面未找到",
desc: `您访问的页面不存在或已被移除。<br>将在 <span class="count" id="time">${countdown}</span> 秒后自动返回首页`
},
maintain: {
title: "网站维护中",
desc: `系统正在升级维护，预计很快恢复。<br>将在 <span class="count" id="time">${countdown}</span> 秒后自动刷新`
}
};
// 渲染模式
const box = document.getElementById("box");
const title = document.getElementById("title");
const desc = document.getElementById("desc");
if (mode === "maintain") box.classList.add("maintain");
title.innerHTML = text[mode].title;
desc.innerHTML = text[mode].desc;
// 倒计时
let t = countdown;
const timeEl = document.getElementById("time");
const timer = setInterval(() => {
t--;
timeEl.innerText = t;
if (t <= 0) {
clearInterval(timer);
location.href = home;
}
}, 1000);
</script>
</body>
</html>资源下载
安全下载 · 会员权益 · 付费获取
发表评论