服务器迁移维护提醒页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>服务器迁移维护中</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
.maintenance-container {
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
position: relative;
color: #fff;
}
.maintenance-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.05);
background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%);
animation: spin 10s linear infinite;
border-radius: 50%;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
h1 {
font-size: 3em;
margin-bottom: 30px;
}
p {
font-size: 1.5em;
margin-bottom: 30px;
}
.countdown {
font-size: 2.5em;
color: #ff6b6b;
margin: 20px 0;
font-weight: bold;
}
.maintenance-message {
font-size: 1.2em;
}
.time-label {
font-size: 1.5em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<h1>服务器迁移维护中</h1>
<p>我们正在进行服务器迁移和维护工作。</p>
<div>预计完成时间：</div>
<div id="estimated-time">--:--:--</div>
<div>当前倒计时：</div>
<div id="countdown"></div>
<p>请稍后再访问，感谢您的理解与支持！</p>
</div>
<script>
// 设置维护结束的时间点（例如：2024年1月1日 08:00 AM）
var maintenanceEndTime = new Date('2024-11-13T23:00:00').getTime();
function updateCountdown() {
var now = new Date().getTime();
var distance = maintenanceEndTime - now;
// 计算时间差
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 显示倒计时
document.getElementById("countdown").innerHTML = ((hours < 10) ? "0" : "") + hours + "<span>小时</span> " + ((minutes < 10) ? "0" : "") + minutes + "<span>分钟</span> " + ((seconds < 10) ? "0" : "") + seconds + "<span>秒</span>";
// 如果倒计时结束，显示结束消息
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "维护结束";
document.getElementById("estimated-time").innerHTML = "已过时间";
}
}
// 每秒更新倒计时
var x = setInterval(updateCountdown, 1000);
// 显示预计完成时间
document.getElementById("estimated-time").innerHTML = new Date('2024-01-01T08:00:00').toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'});
</script>
</body>
</html>
