页面展示:
<!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' }, 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%); } .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; } } @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; } } </style> </head> <body class="font-inter bg-neutral min-h-screen flex flex-col items-center justify-center text-dark"> <!-- 顶部装饰条 --> <div class="w-full h-2 bg-gradient-blue"></div> <!-- 主容器 --> <div class="container max-w-4xl mx-auto px-4 py-8 md:py-16"> <!-- 标志区域 --> <div class="text-center mb-10 fade-in"> <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 mb-4"> <i class="fa-solid fa-wrench text-primary 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-blue 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-clock-o mr-1"></i> 预计 30 分钟 </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> 维护详情 </h3> <p class="text-gray-700 leading-relaxed"> 我们正在进行系统升级和性能优化,以提供更稳定、更高效的服务。在此期间,网站将暂时无法访问。 </p> </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> 维护剩余时间 </h3> <div class="grid grid-cols-4 gap-2 md:gap-4"> <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">29</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">59</div> <div class="text-xs md:text-sm text-gray-500 mt-2">秒</div> </div> <div class="text-center flex items-center justify-center"> <div class="pulse-animation"> <i class="fa-solid fa-circle text-primary"></i> </div> </div> </div> </div> <!-- 预计完成时间 --> <div class="bg-gray-50 rounded-xl p-4 mb-8"> <p class="text-center text-gray-700"> <i class="fa-solid fa-calendar-check-o text-primary mr-2"></i> 预计完成时间: <span id="completion-time" class="font-medium text-primary"></span> </p> </div> <!-- 进度条 --> <div class="mb-6"> <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"> <p class="text-gray-600 mb-4">如有任何问题,请联系我们</p> <a href="mailto:info@dalao.net" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors duration-300"> <i class="fa-solid fa-envelope mr-2"></i> info@dalao.net </a> </div> </div> </div> <!-- 页脚 --> <footer class="mt-12 text-center text-gray-500 text-sm fade-in" style="animation-delay: 0.4s"> <p>© 2025 大佬论坛. 保留所有权利.</p> </footer> </div> <script> // 设置维护总时长(30分钟) const totalMinutes = 30; let totalSeconds = totalMinutes * 60; // 计算预计完成时间 const now = new Date(); const completionTime = new Date(now.getTime() + totalSeconds * 1000); // 更新完成时间显示 document.getElementById('completion-time').textContent = `${completionTime.getHours().toString().padStart(2, '0')}:${completionTime.getMinutes().toString().padStart(2, '0')}`; // 倒计时函数 function updateCountdown() { totalSeconds--; if (totalSeconds < 0) { totalSeconds = 0; clearInterval(countdownInterval); document.getElementById('progress-bar').style.width = '100%'; document.getElementById('progress-percentage').textContent = '100%'; } const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); // 更新进度条 const progress = ((totalMinutes * 60 - totalSeconds) / (totalMinutes * 60)) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; document.getElementById('progress-percentage').textContent = `${Math.round(progress)}%`; } // 每秒更新一次倒计时 updateCountdown(); // 立即更新一次 const countdownInterval = setInterval(updateCountdown, 1000); </script> </body> </html>
维护完成:
<!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' }, 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); } } @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; } } </style> </head> <body class="font-inter bg-neutral min-h-screen flex flex-col items-center justify-center text-dark"> <!-- 顶部装饰条 --> <div class="w-full h-2 bg-gradient-green"></div> <!-- 主容器 --> <div class="container max-w-4xl mx-auto px-4 py-8 md:py-16"> <!-- 标志区域 --> <div class="text-center mb-10 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"> <p class="text-gray-600 mb-4">如有任何问题,请联系我们</p> <a href="mailto:info@dalao.net" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors duration-300"> <i class="fa-solid fa-envelope mr-2"></i> info@dalao.net </a> </div> </div> </div> <!-- 页脚 --> <footer class="mt-12 text-center text-gray-500 text-sm fade-in" style="animation-delay: 0.4s"> <p>© 2025 大佬论坛. 保留所有权利.</p> </footer> </div> <script> // 添加页面加载完成后的动画效果 document.addEventListener('DOMContentLoaded', function() { // 可以添加更多的交互功能,如自动跳转等 }); </script> </body> </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:i@xsjya.cn" 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 大佬论坛. 保留所有权利.</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:i@xsjya.cn" 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 大佬论坛. 保留所有权利.</p> </footer> </div> <script> /*************************************************************** * 维护时间配置区域 - 请修改以下时间设置 * 格式:"年.月.日 时:分" (24小时制) * 示例:"2025.05.31 00:00" ***************************************************************/ const config = { maintenanceStartTime: "2025.05.31 03:23", // 维护开始时间 maintenanceEndTime: "2025.06.01 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>
搬运于大佬论坛
本站https://ygz.ink文章https://ygz.ink/archives/2342.html中提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息来自博主网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
邮箱:gouweicaosheji@163.com