uniapp小程序,订单列表中30分钟倒计时,不借助组件
时间: 2023-10-03 14:03:55 浏览: 171
uniapp电商小程序实现订单30分钟倒计时
你可以通过 JavaScript 中的 `setInterval()` 函数来实现倒计时功能,具体实现方式如下:
1. 在订单列表中,为每个订单添加一个时间戳或者下单时间的属性;
2. 创建一个函数,用来计算当前时间和订单生成时间之间的时间差,然后转换为倒计时需要的格式(例如:00:30:00);
3. 使用 `setInterval()` 函数每秒钟调用一次上述函数,更新倒计时显示;
4. 当倒计时结束时,可以触发回调函数,执行相应的操作(例如:自动取消订单)。
下面是一个示例代码:
```javascript
// 订单列表中的一个订单对象
const order = {
id: 123,
createTime: new Date('2021-10-01T10:00:00.000Z').getTime() // 下单时间戳
}
// 获取当前时间和订单生成时间之间的时间差,并转换为倒计时需要的格式
function getTimeRemaining(endTime) {
const total = endTime - new Date().getTime();
const minutes = Math.floor((total / 1000 / 60) % 60);
const seconds = Math.floor((total / 1000) % 60);
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
// 在页面上显示倒计时
const countdownEl = document.getElementById('countdown');
let countdownIntervalId;
function startCountdown(order) {
const endTime = order.createTime + 30 * 60 * 1000; // 倒计时结束时间
countdownIntervalId = setInterval(() => {
const timeRemaining = getTimeRemaining(endTime);
countdownEl.innerText = timeRemaining;
if (timeRemaining === '00:00') {
clearInterval(countdownIntervalId);
// TODO: 倒计时结束后执行的操作
}
}, 1000);
}
// 开始倒计时
startCountdown(order);
```
需要注意的是,上述代码只是一个示例,如果要在实际项目中使用,还需要根据具体需求进行修改和优化。
阅读全文