直播app开发搭建,vue 一分钟倒计时功能实现
直播app开发搭建,vue 一分钟倒计时功能实现
HTML
<template>
<div @click="countdowm" v-text="content "></div>
</template>
在data里边定义相关变量
data() {
return {
content: "倒计时",
canClick: true,
refreshData: null
};
},
在methods里边定义相关方法
methods: {
countdowm() {
let totalTime = 60;
if (!this.canClick) return; //节流
this.canClick = false;
this.content = totalTime + "s后重新倒计时";
this.refreshData = window.setInterval(() => {
totalTime--;
this.content = totalTime + "s后重新倒计时";
if (totalTime < 0) {
//当倒计时小于0时清除定时器
window.clearInterval(this.refreshData); //清除定时器
this.content = "重新开始倒计时";
totalTime = 60;
this.canClick = true; //这里重新开启
}
}, 1000);
}
},
以上就是 直播app开发搭建,vue 一分钟倒计时功能实现,更多内容欢迎关注之后的文章