其实要实现这个功能原理非常简单,就是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. idea(2018.3.5)破解

    第一步:下载idea,https://www.jetbrains.com/idea/download/#section=windows,双击进行安装 第二步:下载破解的jar包:链接:https:// ...

  2. C++随机数笔记

    版权声明:本文为CSDN博主「candyliuxj」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/can ...

  3. 不同路径II --动态规划

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 现在考虑网 ...

  4. jsGrid使用入门

    jsGrid使用入门 原创蓝天上的一朵云 本文链接:https://blog.csdn.net/u012846041/article/details/82735811 jsGrid资源地址: http ...

  5. Vert.x Web

    https://vertx.io/docs/vertx-web/java/ Vert.x-Web是一组用于使用Vert.x构建Web应用程序的构建块.将其视为瑞士军刀,用于构建现代,可扩展的网络应用程 ...

  6. 拷贝 vs 赋值

    其实我只要关注两个动作就够了: 拷贝.赋值=            (而构造.析构的步骤都是没疑问的.) ——>   赋值=  都是显式调用的, 而拷贝构造可以显示调,也可能隐式被调. 下图错误 ...

  7. Java自学-异常处理 处理

    Java的异常处理办法 try catch throws 异常处理常见手段: try catch finally throws 步骤 1 : try catch 1.将可能抛出FileNotFound ...

  8. 手撕面试官系列(一):spring108道面试题合集

    前言 想必各位程序员已经开始准备金九银十的秋招了,创建这个这个系列文章的目的就是为了帮助大家解决面试的问题,系列文章将会一直更新,大家如果觉得不错可以关注我并转发,让更多程序兄弟看到~接下来我们进入正 ...

  9. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  10. RPC相关知识

    为什么要进行系统拆分,为什么要用dubbo RPC的由来,基本架构,实现原理,整个调用过程经历了哪几步 Java动态代理及 RPC框架介绍 一篇文章了解RPC框架原理 dubbo详解及demo实例 d ...