其实要实现这个功能原理非常简单,就是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. sql中筛选第一条记录【分组排序】

    问题描述 我们现在有一张表titles,共有4个字段,分别是emp_no(员工编号),title(职位),from_date(起始时间),to_date(结束时间),记录的是员工在某个时间段内职位名称 ...

  2. ELK学习笔记之Kibana安装配置

    Kibana 是一个开源的分析和可视化平台,是ELK的重要部分.Kibana提供搜索.查看和与存储在 Elasticsearch 索引中的数据进行交互的功能.开发者或运维人员可以轻松地执行高级数据分析 ...

  3. 批量修改Ms SqlServer 的default(默认值)

    原文:批量修改Ms SqlServer 的default(默认值) --1.取得数据库所有表的默认值: select t3.name as 表名,t1.name as 字段名,t2.text as 默 ...

  4. .net Dapper 实践系列(6) ---事务删除(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 实现步骤 写在最后 写在前面 上一小节,总结了事务多表更新的两种方法.一个是只更新原来的数据,一个是先删除原来的数据再往里面添加新的数据.而这一小节,说的是事务的多表删除. 实现步骤 ...

  5. c#使用SoundPlayer播放wav格式音频

    1.引用System.Media名称空间下的类SoundPlayer   SoundPlayer player = new SoundPlayer(); 2.方法调用Play(); public vo ...

  6. C#利用控件mscomm32.ocx读取串口datalogic扫描枪数据

    1).开发环境VS12,语言C# 2).扫描枪品牌:datalogic 4470 3).通讯协议:串口 1.首先,第一步创建一个新工程,windows窗体应用程序,命名为TestScanner,如下: ...

  7. Java自学-接口与继承 内部类

    Java 内部类 内部类分为四种: 非静态内部类 静态内部类 匿名类 本地类 步骤 1 : 非静态内部类 非静态内部类 BattleScore "战斗成绩" 非静态内部类可以直接在 ...

  8. codeforces#566(Div.2)B

    B.Plus from Picture You have a given picture with size w×hw×h. Determine if the given picture has a ...

  9. 换个语言学一下 Golang (10)——并行计算

    如果说Go有什么让人一见钟情的特性,那大概就是并行计算了吧. 做个题目 如果我们列出10以下所有能够被3或者5整除的自然数,那么我们得到的是3,5,6和9.这四个数的和是23.那么请计算1000以下( ...

  10. 【转载】C#通过Remove方法移除DataTable中的某一列数据

    在C#中的Datatable数据变量的操作过程中,有时候我们需要移除当前DataTable变量中的某一列的数据,此时我们就需要使用到DataTable变量内部的Columns属性变量的Remove方法 ...