const minutes = 1000 * 60; // 一分钟
let oveTime = 0; // 倒计时结束时 间
let flag = null; // timeout标记
let time = 0; // 倒计时结束时间
start();
function start() {
oveTime = +new Date() + minutes; // 加法运算 时间戳 + 一分钟 = 结束时间
run();
function run() {
const now = +new Date();
time = parseInt((oveTime - now) / 1000); // 结束时间 - 当前时间 的整数秒
console.log(time)
if (time < 0) {
// 倒计时小于 0 秒 的时候暂停
time = 0;
} else {
// 倒计时大于等于0的时候 200 毫秒后继续轮询
requestAnimationFrame(run);
}
}
}
<p class="code" @click="receiveCode" v-if="timerTf">获取验证码</p>
<p class="code codeDisable" v-else>{{ countDownNum }} 秒后重新获取</p>
timerTf: true,
countDownNum: 3,
timer: null,
methods: {
receiveCode() {
this.timerTf = false
this.countDownNum = 3
this.timer = setInterval(() => {
this.countDownNum--
if (this.countDownNum <= 0) {
this.timerTf = true
clearInterval(this.timer)
}
}, 1000)
this.$emit('receiveCode')
}
}
vue 倒计时 验证码倒计时
于 2022-06-01 14:26:16 首次发布