Vue 倒计时组件:1:59 格式实现 - 代码示例
以下是使用Vue编写的倒计时代码,显示格式为1:59:
<template>
<div>
{{ minutes }}:{{ seconds }}
</div>
</template>
<script>
export default {
data() {
return {
minutes: 1,
seconds: 59,
timer: null
};
},
mounted() {
this.startTimer();
},
methods: {
startTimer() {
this.timer = setInterval(() => {
if (this.seconds > 0) {
this.seconds--;
} else {
if (this.minutes > 0) {
this.minutes--;
this.seconds = 59;
} else {
clearInterval(this.timer);
}
}
}, 1000);
}
}
};
</script>
在上述代码中,我们使用minutes和seconds两个变量分别表示倒计时的分钟和秒数。在startTimer方法中,我们使用setInterval函数以每秒钟的间隔来更新倒计时的时间。当秒数大于0时,我们将秒数减1;当秒数为0时,我们检查分钟数是否大于0,如果是,则将分钟数减1,同时将秒数重置为59;如果分钟数也为0,则清除计时器。
请将上述代码保存为一个Vue组件,然后在需要使用倒计时的地方引入并使用该组件。
原文地址: https://www.cveoy.top/t/topic/pKZ6 著作权归作者所有。请勿转载和采集!