<span>
{{ countDown(scope.row.shengyuTime) }}
</span>
beforeDestroy() {
clearInterval(this.dhmsTimer) //关闭
},
methods: {
countDownFn() {
return new Promise((resolve, rejecte) => {
if (
this.tableData.every(
(item) => parseInt(new Date(item.enquiryDateTo).getTime() / 1000) < parseInt(new Date().getTime() / 1000)
)
) {
this.loading = false
clearInterval(this.dhmsTimer) //关闭
rejecte('剩余报价时间小于当前时间')
} else {
clearInterval(this.dhmsTimer) //关闭
let num = 0
this.dhmsTimer = setInterval(() => {
for (const obj of this.tableData) {
if (num == 0) {
let nowTime = parseInt(new Date().getTime() / 1000)
let endTime = parseInt(new Date(obj.enquiryDateTo).getTime() / 1000)
obj.shengyuTime = endTime - nowTime
}
if (obj.shengyuTime < 1) {
this.countDown(0)
} else {
obj.shengyuTime = obj.shengyuTime - 1
this.countDown(obj.shengyuTime)
}
}
num = 1
this.loading = false
resolve('成功')
}, 1000)
}
})
},
// 天 时 分 秒 格式化函数
countDown(val) {
let textTime = null
if (val > 0) {
let d = parseInt(val / (60 * 60 * 24))
let h = parseInt((val / (60 * 60)) % 24)
let m = parseInt((val / 60) % 60)
let s = parseInt(val % 60)
if (d > 0) {
textTime = d + '天' + m + '分' + s + '秒'
} else {
if (h != 0) {
textTime = h + '小时' + m + '分'
} else {
textTime = m + '分' + s + '秒'
}
}
} else {
textTime = '0分0秒'
}
return textTime
},
vue elment表格内倒计时(待优化代码)
于 2022-06-01 19:23:00 首次发布
该内容涉及前端开发中的实时倒计时功能实现,通过JavaScript处理表格数据,检查每个项目的询价结束时间,并进行动态更新。当所有询价时间小于当前时间时,停止倒计时并显示相应提示。同时,使用Promise来管理和同步计时器操作,确保数据的准确性和用户体验。
摘要由CSDN通过智能技术生成