其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60,然后在setInterval里执行每秒减1的操作,setTimeout在60秒后执行clearInterval清除定时器的操作

<view v-if="showText==true" class="send" @click="getCode">发送验证码</view>
<view v-else class="send">{{second}}s重新发送</view>

  data() {
    return {
      second:60,
      showText:true,
    };
 },

getCode(){//倒计时
this.showText = false
var interval = setInterval(() => {
let times = --this.second
this.second = times<10?'0'+times:times //小于10秒补 0
}, 1000)
setTimeout(() => {
clearInterval(interval)
this.second=60
this.showText = true
}, 60000)
},

uni验证码60秒倒计时的更多相关文章

  1. button获取验证码60秒倒计时 直接用

    __block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...

  2. js实现60秒倒计时效果(使用了jQuery)

    今天碰到要实现一个类似那种短信验证码60秒倒计时的需求,好久不写js,有点手生.把代码记录下,方便后续查阅. 这里我用了jQuey,毕竟写起来简洁点.下面直接看效果和代码. 一.效果          ...

  3. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  4. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. iOS-登录发送验证码时60秒倒计时,直接用

    __block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...

  6. 获取验证码,60秒倒计时js

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  7. JS获取短信验证码60秒

    <script language="javascript">    function get_mobile_code(){        $.post("{{ ...

  8. js jquery 按钮点击后 60秒之后才能点击 60秒倒计时

    var wait = 60; function time(o) { if (wait == 0) { $(o).attr("disabled", false); $(o).val( ...

  9. 点击按钮出现60秒倒计时js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 记lombok@Data和@Builder一起用无法添加无参构造方法的坑

    转自:https://blog.csdn.net/w605283073/article/details/89221853 今天和小伙伴讨论一个mybatis-plus的一个诡异问题,最后定位到原因竟然 ...

  2. python selenium IE Firxfor pyinstaller

    以前在python环境下selenium 主要用的是chromdriver,这次发现老是报错(Timeout), 实际又是正确的, 可能是和chrome版本不正确,再加上我程序蹦来就在windows环 ...

  3. 【题解】最长递增路径 [51nod1274]

    [题解]最长递增路径 [51nod1274] 传送门:最长递增路径 \([51nod1274]\) [题目描述] 一个可能有自环有重边的无向图,每条边都有边权.输入两个整数 \(n,m\) 表示一共 ...

  4. c#按指定长度分解数组

    在操作数据库时,我们需要注意一点,就是in查询的参数不能超过1000个,否则会报错,所以我们在进行in查询的时候需要对参数数量进行控制: 用于分解数组的扩展方法: /// <summary> ...

  5. 推送一个docker 使用阿里docker hub

    阿里docker hub 地址 打开容器镜像服务页https://cr.console.aliyun.com/cn-qingdao/namespaces 这个是我的私有库 配置加速 我这边用的也是阿里 ...

  6. Vue传递方法给页面调用

    很多人在使用vue的时候苦于在vue中写方法,但是在外部甚至在另一个js该如何调用呢? 这个方法就是显示了vue的可以传递方法到页面使得页面任何地方都可以调用 前提得引用文件 这个方法一般多用于加载周 ...

  7. c#高效准确的条形码、线性条码、QR二维码读写类库-SharpBarcode介绍

    SharpBarcode是一款支持.NET(C#,VB)的高效易用的条形码.QR二维码的读取和生成类库. 主要功能: 1.支持几乎所有常见类型的线性条形码和QR二维码的读取,高效读取,准确率高. 2. ...

  8. .net core Identity注册用户 出错

    使用微软自带的注册 报 NotSupportedException: No IUserTwoFactorTokenProvider<TUser> named 'Default' is re ...

  9. python numPy模块 与numpy里的数据类型、数据类型对象dtype

    学习链接:http://www.runoob.com/numpy/numpy-tutorial.html 官方链接:https://numpy.org/devdocs/user/quickstart. ...

  10. pandas-20 DataFrame()的基本操作

    pandas-20 DataFrame()的基本操作 感觉上pandas的DataFrame就像numpy中的矩阵,不过它拥有列名和索引名,实际操作起来会更方便一些. 如: df = pd.read_ ...