其实要实现这个功能原理非常简单,就是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. Linux基础(01)开发环境的搭建

    内核源码下载 : https://blog.csdn.net/u011375704/article/details/81866427 1.在虚拟机安装Ubuntu 14.04版本 (安装时设置好用户名 ...

  2. Qt元对象(Meta-Object)系统与反射

    反射 -在计算机科学中,反射是指计算机程序在运行时(Run time)可以访问.检测和修改它本身状态或行为的一种能力.[1]用比喻来说,反射就是程序在运行的时候能够“观察”并且修改自己的行为. 要注意 ...

  3. Github 上优秀的 Java 项目推荐

    1.JavaGuide 地址:Snailclimb/JavaGuide [Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识. 2.DoraemonKit 地址:didi/Do ...

  4. UserAgentUtils 获取浏览器信息

    <dependency> <groupId>eu.bitwalker</groupId> <artifactId>UserAgentUtils</ ...

  5. 在ASP.NET Core中获取客户端和服务器端的IP地址(转载)

    随着ASP.NET的发展,有不同的方式从请求中访问客户端IP地址.WebForms和MVC Web应用程序只是访问当前HTTP上下文的请求. var ip = HttpContext.Current. ...

  6. CLR学习之初识CLR

    一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...

  7. js获取简单表单对象(1)

    <form id="form">     <input type="text" name="username" value ...

  8. 配置kubectl在Mac(本地)远程连接Kubernetes集群

    集群部署在云服务器的ECS上,但是有时需要本地原创连接集群,这就需要通过ApiServer的外网地址去访问集群,但是-/.kube/config下的地址又都是内网,所以可以使用如下方式解决: Mac安 ...

  9. 图像上划凸多边形(convexHull()函数)

    import numpy as npimport cv2 as cvimg=np.zeros((400,410),np.uint8)points=np.random.randint(100,400,( ...

  10. Socker编程之UDP

    一:socket简介 1. 不同电脑上的进程之间如何通信 首要解决的问题是如何唯一标识一个进程,否则通信无从谈起! 在1台电脑上可以通过进程号(PID)来唯一标识一个进程,但是在网络中这是行不通的. ...