feat: 添加北京时间显示和刷新倒计时功能
在公告页面底部添加实时北京时间显示和距离下次自动刷新的倒计时功能,提升用户体验
This commit is contained in:
+24
-4
@@ -430,13 +430,33 @@ try {
|
|||||||
window.location.reload();
|
window.location.reload();
|
||||||
}, 5 * 60 * 1000);
|
}, 5 * 60 * 1000);
|
||||||
|
|
||||||
// 显示上次刷新时间
|
// 显示北京时间及距离下次刷新倒计时
|
||||||
const lastRefresh = new Date().toLocaleString('zh-CN');
|
function updateBeijingTime() {
|
||||||
|
const now = new Date();
|
||||||
|
const beijingTime = new Date(now.getTime() + 8 * 60 * 60 * 1000); // 转为北京时间
|
||||||
|
const hours = String(beijingTime.getUTCHours()).padStart(2, '0');
|
||||||
|
const minutes = String(beijingTime.getUTCMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(beijingTime.getUTCSeconds()).padStart(2, '0');
|
||||||
|
|
||||||
|
// 计算距离下次刷新的剩余时间
|
||||||
|
const refreshInterval = 5 * 60 * 1000; // 5分钟
|
||||||
|
const elapsed = now.getTime() % refreshInterval;
|
||||||
|
const remaining = refreshInterval - elapsed;
|
||||||
|
const remMinutes = Math.floor(remaining / 60000);
|
||||||
|
const remSeconds = Math.floor((remaining % 60000) / 1000);
|
||||||
|
|
||||||
|
// 更新显示
|
||||||
|
refreshInfo.textContent = `北京时间 ${hours}:${minutes}:${seconds} | 下次刷新 ${remMinutes}分${remSeconds}秒`;
|
||||||
|
}
|
||||||
|
|
||||||
const refreshInfo = document.createElement('div');
|
const refreshInfo = document.createElement('div');
|
||||||
refreshInfo.style.cssText = 'position:fixed;bottom:10px;right:10px;font-size:0.75rem;color:#999;background:#fff;padding:4px 8px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1);z-index:1000;';
|
refreshInfo.style.cssText = 'position:fixed;bottom:10px;right:10px;font-size:0.75rem;color:#999;background:#fff;padding:4px 8px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1);z-index:1000;';
|
||||||
refreshInfo.textContent = '上次刷新: ' + lastRefresh;
|
|
||||||
document.body.appendChild(refreshInfo);
|
document.body.appendChild(refreshInfo);
|
||||||
});
|
|
||||||
|
// 每秒更新一次
|
||||||
|
setInterval(updateBeijingTime, 1000);
|
||||||
|
updateBeijingTime(); // 初始化显示
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user