网站维护页面 - 动态进度条设计
例如,当前设置为2分钟(60 * 2 = 120秒)。
要修改维护时间,只需更改 `maintenanceConfig.duration` 的值即可。
具体步骤:
1. 在脚本部分找到以下代码:
const maintenanceConfig = {
startTime: new Date(), // 维护开始时间
duration: 60 * 2, // 维护总时长(秒) - 2分钟用于演示
currentProgress: 0,
isCompleted: false
};
2. 将 `duration` 的值改为你想要的秒数。例如:
- 1小时:60 * 60 = 3600
- 30分钟:60 * 30 = 1800
- 2小时:60 * 120 = 7200
3. 保存并重新加载页面,倒计时将按照新的时长运行。
另外,在模拟维护完成后的重启倒计时(10秒)也可以修改,在 `maintenanceCompleted` 函数中:
let restartCount = 10; // 这里可以修改重启倒计时的秒数
但请注意,这个重启倒计时是模拟的,实际维护完成后,应该由网站管理员手动移除维护页面。
因此,用户需要修改的地方有两处:
- 维护总时长(duration)
- 重启倒计时秒数(restartCount)
功能说明
这个网站维护页面具有以下特点:
-
动态进度条:
-
进度条随时间自动增长,真实反映维护进度
-
进度百分比实时更新显示
-
进度条带有流动光效,增强视觉体验
-
-
实时倒计时:
-
显示维护剩余时间(小时、分钟、秒)
-
时间格式美观,数字显示清晰
-
-
维护完成流程:
-
进度达到100%时显示完成消息
-
自动启动重启倒计时
-
模拟系统重启过程
-
最终显示维护完成页面
-
-
视觉效果:
-
深色渐变背景,专业感十足
-
半透明卡片设计,玻璃态效果
-
响应式布局,适配各种设备
-
平滑动画过渡效果
-
-
实用信息:
-
维护原因说明
-
详细联系方式(邮箱和电话)
-
社交媒体链接
-
-
智能细节:
-
进度条有轻微随机波动,模拟真实服务器活动
-
维护完成后进度条变为绿色
-
完成状态有特殊图标提示
-
使用说明
-
页面加载时,维护进度从0%开始
-
进度条随时间自动增长,直到100%
-
达到100%后显示完成消息和重启倒计时
-
倒计时结束后模拟系统重启过程
-
最终显示维护完成页面,提供返回首页选项
这个页面既美观又实用,能够有效告知用户网站维护状态,同时通过进度条和倒计时减少用户的等待焦虑。
评论(0)