这个版本是vue页面实现倒计时的简单版本,需要配合后端一起使用
const lockNum = ref() //因为数据是从后端取所以一开始不赋初始值
function countdown() {
lockNum.value = res.data //这里的赋值是从后端取到的数据
const times = setInterval(() => {
if (lockNum.value === 0) {
clearInterval(times) // 倒计时结束清除计时器
} else {
lockNum.value --
}
}, 1000)
}
缺点:
1、只适用于于后端也在倒计时并实时同步给前端的情况之下
2、countdown方法所绑定的按钮如果不做处理,可以一直点击的情况下,页面所展现的倒计时会一直加快速度