项目中前端通过后端返回的结束时间减去系统当前时间计算出剩余时间(00:00:00)并倒计时,倒计时为00:00:00时又刷新重新调用接口
时间: 2023-08-28 18:04:34 浏览: 77
,获取最新的结束时间并重新计算剩余时间进行倒计时。以下是一个简单的实现方式:
1. 后端返回的结束时间格式为时间戳,在前端将其转换为Date对象。
```
const endTime = new Date(response.data.endTime);
```
2. 在页面中创建一个显示剩余时间的元素,例如:
```
<span id="remaining-time"></span>
```
3. 使用setInterval函数每秒刷新一次剩余时间,并更新元素内容。
```
const remainingTimeElement = document.getElementById('remaining-time');
let remainingTime = endTime - new Date().getTime(); // 剩余时间毫秒数
setInterval(() => {
remainingTime -= 1000;
if (remainingTime <= 0) {
// 倒计时结束,刷新页面
location.reload();
} else {
// 计算剩余时间并更新元素内容
const hours = Math.floor(remainingTime / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
remainingTimeElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
}, 1000);
```
阅读全文