这是一个用于网站维护的HTML页面，通过简单的配置，可以实现维护倒计时和维护完成页面的自动切换。页面设计简洁美观，适合在网站维护期间向用户展示。
功能特点
- 倒计时显示：在维护期间，页面会显示倒计时，让用户知道维护剩余时间。
- 进度条显示：模拟备份、更新、验证等操作的进度，提升用户体验。
- 自动切换：倒计时结束后，页面自动切换到维护完成页面，无需手动刷新。
- 时间配置：通过修改配置文件中的时间设置，可以轻松调整维护的开始和结束时间。
功能
- 倒计时显示：维护期间显示倒计时。
- 进度条模拟：模拟备份、更新、验证进度。
- 自动切换：倒计时结束后自动跳转到维护完成页面。
使用方法
- 下载源码：从附件下载HTML文件。
- 修改时间：在文件中找到配置区域，设置维护的开始和结束时间。
/***************************************************************
* 维护时间配置区域 – 请修改以下时间设置
* 格式：”年.月.日 时:分” (24小时制)
* 示例：”2025.05.31 00:00″
***************************************************************/
const config = {
maintenanceStartTime: “2025.05.31 03:23”, // 维护开始时间
maintenanceEndTime: “2025.06.01 03:25” // 维护结束时间
};
- 上传文件：将文件上传到服务器。
- 测试效果：访问网站，检查倒计时和进度条是否正常。
注意
- 确保时间格式正确。
- 倒计时结束后，后续访问将直接显示维护完成页面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统维护通知</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
neutral: '#F8FAFC',
dark: '#1E293B',
success: '#22C55E',
warning: '#FBBF24',
highlight: '#FFD700',
info: '#3B82F6'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient-blue {
background: linear-gradient(135deg, #165DFF 0%, #0A3CA0 100%);
}
.bg-gradient-green {
background: linear-gradient(135deg, #36D399 0%, #10B981 100%);
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.fade-in {
animation: fadeIn 0.8s ease-in-out;
}
.slide-up {
animation: slideUp 0.8s ease-out;
}
.bounce-in {
animation: bounceIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.progress-pulse {
animation: progressPulse 1.5s ease-in-out infinite;
}
.step-highlight {
animation: stepHighlight 1.5s ease-in-out infinite alternate;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
20% { transform: scale(1.1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.03); opacity: 1; }
80% { transform: scale(0.97); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes progressPulse {
0% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); }
}
@keyframes stepHighlight {
0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.3); }
100% { box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0); }
}
.float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col items-center justify-center text-dark">
<!-- 维护中页面 -->
<div id="maintenance-page" class="container max-w-4xl mx-auto px-4 py-8 md:py-12">
<!-- 标志区域 - 动态显示不同状态 -->
<div class="text-center mb-8 fade-in">
<div id="status-icon" class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 mb-4 float">
<i class="fa-solid fa-clock text-primary text-4xl"></i>
</div>
<h1 id="status-title" class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-2 text-shadow">系统维护中</h1>
<p id="status-description" class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-2xl mx-auto">我们正在进行必要的系统维护，以提升您的使用体验</p>
</div>
<!-- 维护信息卡片 -->
<div id="maintenance-card" class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl slide-up">
<div id="card-header" class="bg-gradient-blue p-6 md:p-8 text-white">
<div class="flex items-center justify-between">
<h2 class="text-2xl md:text-3xl font-bold mb-0">维护通知</h2>
<span id="status-badge" class="bg-info/90 px-3 py-1 rounded-full text-sm font-medium">
<i class="fa-solid fa-clock mr-1"></i> 未开始
</span>
</div>
</div>
<div class="p-6 md:p-8">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="fa-solid fa-info-circle text-primary mr-2"></i>
<span id="info-title">维护详情</span>
</h3>
<p id="info-description" class="text-gray-700 leading-relaxed mb-6">
系统维护尚未开始，请稍后再访问。
</p>
<!-- 维护步骤展示 - 水平布局 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<!-- 备份数据库 -->
<div id="backup-step" class="flex flex-col items-center p-4 bg-gray-50 rounded-xl border border-gray-200 opacity-60">
<div id="backup-icon" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
<i class="fa-solid fa-clock text-gray-400"></i>
</div>
<h4 class="font-semibold text-gray-800">备份数据库</h4>
<div id="backup-status" class="text-xs font-medium mt-1 text-gray-500">等待中</div>
</div>
<!-- 更新核心系统 -->
<div id="core-step" class="flex flex-col items-center p-4 bg-gray-50 rounded-xl border border-gray-200 opacity-60">
<div id="core-icon" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
<i class="fa-solid fa-clock text-gray-400"></i>
</div>
<h4 class="font-semibold text-gray-800">更新核心系统</h4>
<div id="core-status" class="text-xs font-medium mt-1 text-gray-500">等待中</div>
</div>
<!-- 安全验证 -->
<div id="security-step" class="flex flex-col items-center p-4 bg-gray-50 rounded-xl border border-gray-200 opacity-60">
<div id="security-icon" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
<i class="fa-solid fa-clock text-gray-400"></i>
</div>
<h4 class="font-semibold text-gray-800">安全验证</h4>
<div id="security-status" class="text-xs font-medium mt-1 text-gray-500">等待中</div>
</div>
</div>
</div>
<!-- 倒计时区域 -->
<div class="bg-primary/5 rounded-xl p-6 mb-8">
<h3 class="text-xl font-semibold mb-4 text-center">
<i class="fa-solid fa-hourglass-half text-primary mr-2"></i>
<span id="countdown-label">维护开始倒计时</span>
</h3>
<div class="grid grid-cols-4 gap-2 md:gap-4">
<div class="text-center">
<div id="days" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">00</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">天</div>
</div>
<div class="text-center">
<div id="hours" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">00</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">小时</div>
</div>
<div class="text-center">
<div id="minutes" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">00</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">分钟</div>
</div>
<div class="text-center">
<div id="seconds" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">00</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">秒</div>
</div>
</div>
</div>
<!-- 进度条 -->
<div class="mb-6 hidden" id="progress-container">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">维护进度</span>
<span id="progress-percentage" class="text-sm font-medium text-primary">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="bg-primary h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
<!-- 联系信息 -->
<div class="text-center mt-10 p-4 bg-gray-50 rounded-xl">
<h3 class="text-lg font-semibold mb-3 flex items-center justify-center">
<i class="fa-solid fa-headset text-primary mr-2"></i> 需要帮助？
</h3>
<p class="text-gray-600 mb-4">如有任何问题，请随时联系我们</p>
<div class="flex justify-center">
<a href="mailto:enofun@foxmail.com" class="inline-flex items-center justify-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-300">
<i class="fa-solid fa-envelope mr-2"></i> 发送邮件
</a>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-12 text-center text-gray-500 text-sm fade-in" style="animation-delay: 0.4s">
<p>© 2025<a href="http://www.zhongguiyun.com/">众归云</a</p>
</footer>
</div>
<!-- 维护完成后页面 -->
<div id="completion-page" class="container max-w-4xl mx-auto px-4 py-8 md:py-12 hidden">
<!-- 标志区域 -->
<div class="text-center mb-8 fade-in">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary/10 mb-4 bounce-in">
<i class="fa-solid fa-check-circle text-secondary text-4xl"></i>
</div>
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-2 text-shadow">系统维护已完成</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-2xl mx-auto">感谢您的耐心等待</p>
</div>
<!-- 维护信息卡片 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl slide-up">
<div class="bg-gradient-green p-6 md:p-8 text-white">
<div class="flex items-center justify-between">
<h2 class="text-2xl md:text-3xl font-bold">维护完成通知</h2>
<span class="bg-white/20 px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
<i class="fa-solid fa-check mr-1"></i> 已完成
</span>
</div>
</div>
<div class="p-6 md:p-8">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="fa-solid fa-info-circle text-secondary mr-2"></i> 维护结果
</h3>
<p class="text-gray-700 leading-relaxed">
我们已顺利完成系统升级和性能优化，网站现已恢复正常访问。感谢您在此期间的理解与支持。
</p>
</div>
<!-- 成功状态区域 -->
<div class="bg-secondary/5 rounded-xl p-6 mb-8 flex flex-col md:flex-row items-center">
<div class="w-16 h-16 rounded-full bg-secondary/20 flex items-center justify-center mb-4 md:mb-0 md:mr-6">
<i class="fa-solid fa-thumbs-up text-secondary text-2xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold mb-2 text-secondary">维护工作顺利完成</h3>
<p class="text-gray-700">
系统已全面恢复，各项功能均已正常运行。我们对系统进行了全面检查，确保一切正常。
</p>
</div>
</div>
<!-- 提示信息 -->
<div class="bg-primary/5 rounded-xl p-6 mb-8">
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="fa-solid fa-refresh text-primary mr-2"></i> 温馨提示
</h3>
<p class="text-gray-700 mb-4">
如果您仍然看到此页面或遇到任何问题，请尝试以下操作：
</p>
<ul class="list-disc pl-5 text-gray-700 space-y-2">
<li>刷新当前页面（按 F5 键或点击浏览器刷新按钮）</li>
<li>清除浏览器缓存和Cookie后重试</li>
<li>尝试使用其他浏览器访问</li>
</ul>
</div>
<!-- 联系信息 -->
<div class="text-center mt-10 p-4 bg-gray-50 rounded-xl">
<h3 class="text-lg font-semibold mb-3 flex items-center justify-center">
<i class="fa-solid fa-headset text-primary mr-2"></i> 需要帮助？
</h3>
<p class="text-gray-600 mb-4">如有任何问题，请随时联系我们</p>
<div class="flex justify-center">
<a href="mailto:enofun@foxmail.com" class="inline-flex items-center justify-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-300">
<i class="fa-solid fa-envelope mr-2"></i> 发送邮件
</a>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-12 text-center text-gray-500 text-sm fade-in" style="animation-delay: 0.4s">
<p>© 2025<a href="https://www.sdoclub.com/">众归云</a</p>
</footer>
</div>
<script>
/***************************************************************
* 维护时间配置区域 - 请修改以下时间设置
* 格式："年.月.日 时:分" (24小时制)
* 示例："2025.05.31 00:00"
***************************************************************/
/*https://www.sdoclub.com众归云*/
const config = {
maintenanceStartTime: "2025.05.06 03:23", // 维护开始时间
maintenanceEndTime: "2025.06.11 03:25" // 维护结束时间
};
// 解析时间
function parseTime(timeString) {
const [datePart, timePart] = timeString.split(' ');
const [year, month, day] = datePart.split('.').map(Number);
const [hours, minutes] = timePart.split(':').map(Number);
return new Date(year, month - 1, day, hours, minutes, 0);
}
// 初始化时间
const startTime = parseTime(config.maintenanceStartTime);
const endTime = parseTime(config.maintenanceEndTime);
const totalMaintenanceDuration = endTime - startTime;
// 固定时间分配比例
const backupDuration = totalMaintenanceDuration * 0.05; // 5%的时间
const coreDuration = totalMaintenanceDuration * 0.80; // 80%的时间
const securityDuration = totalMaintenanceDuration * 0.15; // 15%的时间
// 计算每个步骤的开始和结束时间
const backupStart = startTime;
const backupEnd = new Date(backupStart.getTime() + backupDuration);
const coreStart = backupEnd;
const coreEnd = new Date(coreStart.getTime() + coreDuration);
const securityStart = coreEnd;
const securityEnd = new Date(securityStart.getTime() + securityDuration);
// 获取或初始化维护状态
const maintenanceState = JSON.parse(localStorage.getItem('maintenanceState')) || {
startTime: startTime.getTime(),
currentStep: 'backup',
backupCompleted: false,
coreCompleted: false,
securityCompleted: false
};
// DOM元素
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
const progressBar = document.getElementById('progress-bar');
const progressPercentage = document.getElementById('progress-percentage');
const statusBadge = document.getElementById('status-badge');
const countdownLabel = document.getElementById('countdown-label');
// 维护步骤元素
const backupStep = document.getElementById('backup-step');
const backupIcon = document.getElementById('backup-icon');
const backupStatus = document.getElementById('backup-status');
const coreStep = document.getElementById('core-step');
const coreIcon = document.getElementById('core-icon');
const coreStatus = document.getElementById('core-status');
const securityStep = document.getElementById('security-step');
const securityIcon = document.getElementById('security-icon');
const securityStatus = document.getElementById('security-status');
// 页面元素
const maintenancePage = document.getElementById('maintenance-page');
const completionPage = document.getElementById('completion-page');
// 状态显示元素
const statusIcon = document.getElementById('status-icon');
const statusTitle = document.getElementById('status-title');
const statusDescription = document.getElementById('status-description');
const cardHeader = document.getElementById('card-header');
const infoTitle = document.getElementById('info-title');
const infoDescription = document.getElementById('info-description');
const progressContainer = document.getElementById('progress-container');
// 初始化页面
document.addEventListener('DOMContentLoaded', () => {
// 检查当前时间与维护时间的关系
const now = new Date();
// 维护尚未开始
if (now < startTime) {
setupPreMaintenanceView();
maintenanceState.startTime = startTime.getTime();
maintenanceState.currentStep = 'backup';
maintenanceState.backupCompleted = false;
maintenanceState.coreCompleted = false;
maintenanceState.securityCompleted = false;
localStorage.setItem('maintenanceState', JSON.stringify(maintenanceState));
}
// 维护已结束
else if (now >= endTime) {
showCompletionPage();
return;
}
// 维护进行中 - 更新状态
else {
// 检查备份是否完成
if (now >= backupEnd) {
maintenanceState.backupCompleted = true;
}
// 检查核心更新是否完成
if (now >= coreEnd) {
maintenanceState.coreCompleted = true;
}
// 检查安全验证是否完成
if (now >= securityEnd) {
maintenanceState.securityCompleted = true;
}
// 确定当前步骤
if (now < backupEnd) {
maintenanceState.currentStep = 'backup';
} else if (now < coreEnd) {
maintenanceState.currentStep = 'core';
} else if (now < securityEnd) {
maintenanceState.currentStep = 'security';
}
localStorage.setItem('maintenanceState', JSON.stringify(maintenanceState));
// 切换到维护中视图
setupMaintenanceView();
}
// 更新步骤状态
updateSteps(now);
// 开始倒计时
startCountdown();
});
// 设置维护尚未开始的视图
function setupPreMaintenanceView() {
// 更新状态图标和标题
statusIcon.innerHTML = '<i class="fa-solid fa-clock text-info text-4xl"></i>';
statusIcon.classList.remove('bg-primary/10');
statusIcon.classList.add('bg-info/10');
statusTitle.textContent = "系统维护即将开始";
statusDescription.textContent = "系统维护尚未开始，请稍后再访问";
// 更新卡片头部
cardHeader.classList.remove('bg-gradient-blue');
cardHeader.classList.add('bg-info');
// 更新状态徽章
statusBadge.innerHTML = '<i class="fa-solid fa-clock mr-1"></i> 未开始';
statusBadge.classList.remove('bg-warning/90', 'bg-success');
statusBadge.classList.add('bg-info/90');
// 更新信息标题和描述
infoTitle.textContent = "维护计划";
infoDescription.textContent = "系统维护尚未开始，请稍后再访问。维护期间网站将暂时无法访问。";
// 更新倒计时标签
countdownLabel.textContent = "维护开始倒计时";
// 隐藏进度条
progressContainer.classList.add('hidden');
}
// 设置维护中的视图
function setupMaintenanceView() {
// 更新状态图标和标题
statusIcon.innerHTML = '<i class="fa-solid fa-wrench text-warning text-4xl"></i>';
statusIcon.classList.remove('bg-info/10');
statusIcon.classList.add('bg-warning/10');
statusTitle.textContent = "系统维护中";
statusDescription.textContent = "我们正在进行必要的系统维护，以提升您的使用体验";
// 更新卡片头部
cardHeader.classList.remove('bg-info');
cardHeader.classList.add('bg-gradient-blue');
// 更新状态徽章
statusBadge.innerHTML = '<i class="fa-solid fa-sync-alt mr-1 animate-spin"></i> 进行中';
statusBadge.classList.remove('bg-info/90', 'bg-success');
statusBadge.classList.add('bg-warning/90');
// 更新信息标题和描述
infoTitle.textContent = "维护详情";
infoDescription.textContent = "我们正在进行系统升级和性能优化，以提供更稳定、更高效的服务。在此期间，网站将暂时无法访问。";
// 更新倒计时标签
countdownLabel.textContent = "维护剩余时间";
// 显示进度条
progressContainer.classList.remove('hidden');
}
// 开始倒计时
function startCountdown() {
// 更新显示
updateDisplay();
// 设置定时器
const countdownInterval = setInterval(() => {
const now = new Date();
// 维护尚未开始
if (now < startTime) {
updateDisplay();
return;
}
// 维护进行中
if (now >= startTime && now < endTime) {
// 如果是刚刚进入维护状态，更新视图
if (statusTitle.textContent !== "系统维护中") {
setupMaintenanceView();
}
// 实时更新状态
updateMaintenanceState(now);
updateDisplay();
updateSteps(now);
return;
}
// 维护结束
if (now >= endTime) {
clearInterval(countdownInterval);
localStorage.removeItem('maintenanceState'); // 清除存储的状态
showCompletionPage();
}
}, 1000);
}
// 实时更新状态
function updateMaintenanceState(now) {
// 检查备份是否完成
maintenanceState.backupCompleted = now >= backupEnd;
// 检查核心更新是否完成
maintenanceState.coreCompleted = now >= coreEnd;
// 检查安全验证是否完成
maintenanceState.securityCompleted = now >= securityEnd;
// 确定当前步骤
if (now < backupEnd) {
maintenanceState.currentStep = 'backup';
} else if (now < coreEnd) {
maintenanceState.currentStep = 'core';
} else if (now < securityEnd) {
maintenanceState.currentStep = 'security';
}
// 保存状态
localStorage.setItem('maintenanceState', JSON.stringify(maintenanceState));
}
// 更新显示
function updateDisplay() {
const now = new Date();
let remainingSeconds = 0;
let progress = 0;
let targetTime = startTime;
// 维护尚未开始 - 倒计时到开始时间
if (now < startTime) {
remainingSeconds = Math.floor((startTime - now) / 1000);
progress = 0;
targetTime = startTime;
}
// 维护进行中 - 倒计时到结束时间
else if (now < endTime) {
remainingSeconds = Math.floor((endTime - now) / 1000);
const elapsedTime = now - startTime;
progress = Math.min((elapsedTime / totalMaintenanceDuration) * 100, 100);
targetTime = endTime;
}
// 维护已结束
else {
remainingSeconds = 0;
progress = 100;
}
// 更新倒计时显示
const days = Math.floor(remainingSeconds / (3600 * 24));
const hours = Math.floor((remainingSeconds % (3600 * 24)) / 3600);
const minutes = Math.floor((remainingSeconds % 3600) / 60);
const secs = remainingSeconds % 60;
daysElement.textContent = days.toString().padStart(2, '0');
hoursElement.textContent = hours.toString().padStart(2, '0');
minutesElement.textContent = minutes.toString().padStart(2, '0');
secondsElement.textContent = secs.toString().padStart(2, '0');
// 更新进度条
const roundedProgress = Math.min(Math.round(progress), 100);
progressBar.style.width = `${progress}%`;
progressPercentage.textContent = `${roundedProgress}%`;
}
// 更新步骤状态
function updateSteps(now) {
// 维护尚未开始
if (now < startTime) {
backupStatus.textContent = "等待中";
backupStatus.classList.remove('text-primary', 'text-success');
backupStatus.classList.add('text-gray-500');
coreStatus.textContent = "等待中";
coreStatus.classList.remove('text-primary', 'text-success');
coreStatus.classList.add('text-gray-500');
securityStatus.textContent = "等待中";
securityStatus.classList.remove('text-primary', 'text-success');
securityStatus.classList.add('text-gray-500');
backupIcon.innerHTML = '<i class="fa-solid fa-clock text-gray-400"></i>';
backupStep.classList.remove('step-highlight', 'border-primary');
backupStep.classList.add('opacity-60');
coreStep.classList.add('opacity-60');
securityStep.classList.add('opacity-60');
return;
}
// 备份数据库阶段
if (maintenanceState.backupCompleted) {
backupStatus.textContent = "已完成";
backupStatus.classList.remove('text-gray-500', 'text-primary');
backupStatus.classList.add('text-success');
backupIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
backupStep.classList.remove('step-highlight', 'border-primary', 'opacity-60');
backupStep.classList.add('border-success', 'bg-success/5');
// 激活核心更新步骤
coreStep.classList.remove('opacity-60');
} else if (maintenanceState.currentStep === 'backup') {
// 计算备份进度 (0-100%)
const backupElapsed = now - backupStart;
const backupProgress = Math.min((backupElapsed / backupDuration) * 100, 100);
backupStatus.textContent = `进行中（${backupProgress.toFixed(1)}%）`;
backupStatus.classList.remove('text-gray-500', 'text-success');
backupStatus.classList.add('text-primary');
backupIcon.innerHTML = '<i class="fa-solid fa-sync-alt text-primary animate-spin"></i>';
backupStep.classList.add('step-highlight', 'border-primary');
backupStep.classList.remove('opacity-60');
}
// 核心更新阶段
if (maintenanceState.coreCompleted) {
coreStatus.textContent = "已完成";
coreStatus.classList.remove('text-gray-500', 'text-primary');
coreStatus.classList.add('text-success');
coreIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
coreStep.classList.remove('step-highlight', 'border-primary', 'opacity-60');
coreStep.classList.add('border-success', 'bg-success/5');
// 激活安全验证步骤
securityStep.classList.remove('opacity-60');
} else if (maintenanceState.currentStep === 'core') {
// 计算核心更新进度 (0-100%)
const coreElapsed = now - coreStart;
const coreProgress = Math.min((coreElapsed / coreDuration) * 100, 100);
coreStatus.textContent = `进行中（${coreProgress.toFixed(1)}%）`;
coreStatus.classList.remove('text-gray-500', 'text-success');
coreStatus.classList.add('text-primary');
coreIcon.innerHTML = '<i class="fa-solid fa-sync-alt text-primary animate-spin"></i>';
coreStep.classList.add('step-highlight', 'border-primary');
coreStep.classList.remove('opacity-60');
}
// 安全验证阶段
if (maintenanceState.securityCompleted) {
securityStatus.textContent = "已完成";
securityStatus.classList.remove('text-gray-500', 'text-primary');
securityStatus.classList.add('text-success');
securityIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
securityStep.classList.remove('step-highlight', 'border-primary', 'opacity-60');
securityStep.classList.add('border-success', 'bg-success/5');
} else if (maintenanceState.currentStep === 'security') {
// 计算安全验证进度 (0-100%)
const securityElapsed = now - securityStart;
const securityProgress = Math.min((securityElapsed / securityDuration) * 100, 100);
securityStatus.textContent = `进行中（${securityProgress.toFixed(1)}%）`;
securityStatus.classList.remove('text-gray-500', 'text-success');
securityStatus.classList.add('text-primary');
securityIcon.innerHTML = '<i class="fa-solid fa-sync-alt text-primary animate-spin"></i>';
securityStep.classList.add('step-highlight', 'border-primary');
securityStep.classList.remove('opacity-60');
}
}
// 显示完成页面
function showCompletionPage() {
// 更新所有步骤状态为已完成
maintenanceState.backupCompleted = true;
maintenanceState.coreCompleted = true;
maintenanceState.securityCompleted = true;
maintenanceState.currentStep = 'completed';
// 更新状态徽章
statusBadge.innerHTML = '<i class="fa-solid fa-check mr-1"></i> 已完成';
statusBadge.classList.remove('bg-warning/90');
statusBadge.classList.add('bg-success');
// 更新所有步骤显示
backupStatus.textContent = "已完成";
backupStatus.classList.remove('text-gray-500', 'text-primary');
backupStatus.classList.add('text-success');
backupIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
backupStep.classList.remove('step-highlight', 'border-primary', 'opacity-60');
backupStep.classList.add('border-success', 'bg-success/5');
coreStatus.textContent = "已完成";
coreStatus.classList.remove('text-gray-500', 'text-primary');
coreStatus.classList.add('text-success');
coreIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
coreStep.classList.remove('step-highlight', 'border-primary', 'opacity-60');
coreStep.classList.add('border-success', 'bg-success/5');
securityStatus.textContent = "已完成";
securityStatus.classList.remove('text-gray-500', 'text-primary');
securityStatus.classList.add('text-success');
securityIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
securityStep.classList.remove('step-highlight', 'border-primary', 'opacity-60');
securityStep.classList.add('border-success', 'bg-success/5');
// 更新进度条
progressBar.style.width = '100%';
progressPercentage.textContent = '100%';
// 切换页面显示
maintenancePage.classList.add('hidden');
completionPage.classList.remove('hidden');
}
</script>
</body>
</html>本文来自网络，不代表王道测评立场，如有争议请发邮件：enofun@foxmail.com
AD：【本站QQ交流群】114135944
评论