其实要实现这个功能原理非常简单,就是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. C++ 结构体、模板、类、重载初使用

    目的:需要几个缓存用的数组900*750 首先定义一个模板<参数数据类型,参数1,参数2> 定义一个class类 名字自己取ap_uint0 下面是公用的数组模板[lrow][lcol] ...

  2. java属性和普通方法

    属性和普通方法 一.定义类 上一节讲了很多深奥的理论,那么这节我们就得实践一下,先简单描述一下我们的实体世界:有一个学生小明,那么这个学生就是一个对象,这个对象有哪些属性和方法呢,我们可以先简单抽象一 ...

  3. CXF 教程(一)

    CXF Web Service 简单示例 1 准备工作 2 第一个例子 3 客户端 3.1 使用 WSDL 生成客户端 4 RPC 风格 5 相关命令介绍 5.1 Java to WS 1 准备工作 ...

  4. Java操作JSON数据(4,end)--Jackson操作JSON数据

    Jackson是SpringBoot默认使用的JSON处理库,它可以轻松的将Java对象转换成JSON对象,同样也可以将JSON转换成Java对象.本文介绍下Jackson的基本使用方法,包括序列化和 ...

  5. 关于乌班图18.04安装mysql不提示设置密码解决方案

    1.下载安装mysql sudo apt-get update sudo apt-get install -y mysql-server mysql-client //下载mysql 运行mysql时 ...

  6. 【SQL】各取所需 | SQL JOIN连接查询各种用法总结

    前面 在实际应用中,大多的查询都是需要多表连接查询的,但很多初学SQL的小伙伴总对各种JOIN有些迷糊.回想一下,初期很长一段时间,我常用的似乎也就是等值连接 WHERE 后面加等号,对各种JOIN也 ...

  7. 使用Nexus3搭建Maven私服+上传第三方jar包到本地maven仓库

    1.搭建Maven私服背景 公司还是按捺不住,要搭建一个自己的Maven本地仓库,可以让开发人员down架包,从内网还是快很多. 这样公司的maven本地仓库就是 开发人员自己电脑上的maven仓库 ...

  8. [转发] SAP EPIC 银企直连+TRM资金管理

    事务代码:EPIC_PROC 电子支付集成 收款; 付款; 付款审批; 银行回单(下载,创建,修改,辩识,认领); 查询账户余额; 查询交易明细; BADI增强; VA虚拟账户客户回单自动辨识; .. ...

  9. Spring MVC Web.xml配置

    Web.xml spring&spring mvc 在web.xml中定义contextConfigLocation参数,Spring会使用这个参数去加载所有逗号分隔的xml文件,如果没有这个 ...

  10. Java小知识点总结01

    1. 整数相乘或者相加,如果超过最大整数值,会变成负数 2. 字符串比较可以使用:s1.compareTo(s2) ,如果s1大于s2返回值大于1,等于返回值等于0,小于返回值小于1 3. char值 ...