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);}
},

离开页面时销毁定时器

//beforeDestroy为实例销毁之前调用
beforeDestroy() {if (this.refreshData) {// console.log('销毁倒计时')clearInterval(this.refreshData);this.refreshData = null;}
}

vue 一分钟倒计时功能实现相关推荐

【vue一分钟倒计时】
一分钟倒计时 <template><div @click="sendCode">{{ content }}</div> </templat ...
在vue中制作倒计时功能
在vue中制作简单的倒计时倒计时的核心是通过递归来时实现定时器所以在方法中使用setTimeout 就行了 <script src="https://cdn.jsdelivr.n ...
vue 实现分钟倒计时
实现首先,是两个div用来显示我们的剩余支付时间然后,是倒计时函数countdown //倒计时 countdown () {const end = Date.parse(new Date('20 ...
vue 订单支付15分钟倒计时
vue 订单支付15分钟倒计时 //支付倒计时ComputetTime(data) {let st = data.currentTime.replace(/\-/g, "/"),/ ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
vue实现倒计时功能
简单介绍下倒计时功能 html如下: <p>倒计时:{{hour}}:{{minute}}:{{second}}</p> js如下: <script type=" ...
vue 微信录音倒计时_vue的微信语音功能，录音+对接口返回amr音频播放-Go语言中文社区...
vue的微信语音功能,录音+对接口返回amr音频播放最近的新项目需要调用微信的录音功能,但是后台又不给音频转码,无奈之下就踏上了研究前端音频编码器这东西. 参考的GitHub仓库--Recorder ...
springboot+vue实现手机验证码功能
springboot+vue实现手机验证码功能榛子云短信平台用户中心注册登录(有免费的一条消息,剩下的需要买)(阿里云个人得备案) 在springboot中加入依赖,用到了redis,阿里的fast ...
vue中实现定时器功能
引言在使用vue开发注册页面的时候,需要完成获取邮箱验证码,然后获取按钮进入一分钟倒计时无法点击的需求.大概结果如下图代码示例按钮 <el-button :disabled="s ...

vue 一分钟倒计时功能实现

HTML

在data里边定义相关变量

在methods里边定义相关方法

离开页面时销毁定时器

vue 一分钟倒计时功能实现相关推荐

最新文章

热门文章