vue实现点击按钮倒计时
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了vue实现点击按钮倒计时的具体代码，供大家参考，具体内容如下
实现效果：
1.点击开始按钮启动计时
2.点击重置按钮计时恢复到00:00:00
3.点击暂停按钮暂停计时
Vue代码：
<template>
<div>
<div class="timeContainer">{{ time }}</div>
<a-button style="margin-right: 20px" type="primary" @click="start"
>开始</a-button
>
<a-button style="margin-right: 20px" type="primary" @click="reset"
>重置</a-button
>
<a-button type="primary" @click="end">暂停</a-button>
</div>
</template>
<script>
export default {
data() {
return {
flag: null,
hour: 0,
minute: 0,
second: 0,
time: "00:00:00",
};
},
methods: {
//开始计时
start() {
this.flag = setInterval(() => {
this.second = this.second + 1;
if (this.second >= 60) {
this.second = 0;
this.minute = this.minute + 1;
}
if (this.minute >= 60) {
this.minute = 0;
this.hour = this.hour + 1;
}
this.time =
this.complZero(this.hour) +
":" +
this.complZero(this.minute) +
":" +
this.complZero(this.second);
}, 1000);
},
//重新计时
reset() {
window.clearInterval(this.flag);
this.hour = 0;
this.minute = 0;
this.second = 0;
this.time = "00:00:00";
},
//暂停计时
end() {
this.flag = clearInterval(this.flag);
},
//补零
complZero(n) {
return n < 10 ? "0" + n : "" + n;
},
},
};
</script>
<style>
.timeContainer {
font-size: 40px;
margin-bottom: 10px;
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
