vue中通过定时器设置倒计时，5秒倒计时

前言：有时候，在项目中，我们经常需要设置简单的倒计时功能，这个可以通过定时器来实现。

一、设置div显示倒计时数字

<div class="countCircle"><span>{{countdown}}</span>
</div>

二、JS中设置方法

export default{data(){countdown:'5',timer: null,},methods:{if(this.doCheck()){this.sendCode();  //触发倒计时}//倒计时sendCode(){this.loading();  //启动定时器this.timer = setInterval(() =>{//创建定时器if(this.countdown === 1){this.clearTimer();  //关闭定时器this.skipStep();}else{this.loading();}},1000);},loading(){//启动定时器this.countdown--;  //定时器减1},clearTimer(){//清除定时器clearInterval(this.timer);this.timer = null;},},
};

这样，一个简单的倒计时功能就做好了。

参考博客：

Vue中通过定时器制作简单倒计时 https://www.cnblogs.com/xiaoxiaomini/p/12843448.html

vue中通过定时器设置倒计时，5秒倒计时相关推荐

html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解
本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设 ...
Vue中使用定时器和随机数
Vue中使用定时器和随机数,程序示例如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
vue中使用定时器setInterval
vue中使用定时器setInterval this.timer = setInterval(this.fetchData, 1000);clearInterval(this.timer);before ...
单片机c语言99秒的定时器,通过51单片机定时器1实现99秒倒计时
今天刚刚完成了一个新的单片机实验,犯了一个小小的错误,导致不能够倒计时,弄了几个小时, 结果发现是变量的取值范围出错了任何一个实验都应该自己动手去实践,没有实践是不知道自己少了什么的.只有实践才能够 ...
关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。
//函数接受一个结束时间,单位为毫秒,算出当前距离结束时间点的时间,输出一个对象 //输出示例:{ // hourNum: '12', // minuteNum: '13', // secondNum ...
vue页面实现短信验证码60秒倒计时
废话不多说,直接上代码. template <div class='single-wrapper fs14'><div class='single-mb'>短信验证</d ...
vue中单选框设置默认选中值
vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) ...
Java 中Timer定时器设置订单提交后24小时未付款订单状态为已关闭。
1. 简单的Timer定时器方法 public class CommTimer {/*** 设置指定24小时后执行*/public static void orderClose() {final Ti ...
Vue中使用定时器setInterval和延迟执行setTimeout
js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 一.循环执行(setInterval) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次 ...

vue中通过定时器设置倒计时，5秒倒计时

vue中通过定时器设置倒计时，5秒倒计时相关推荐

最新文章

热门文章