uni验证码60秒倒计时
其实要实现这个功能原理非常简单,就是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秒倒计时的更多相关文章
- button获取验证码60秒倒计时 直接用
__block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...
- js实现60秒倒计时效果(使用了jQuery)
今天碰到要实现一个类似那种短信验证码60秒倒计时的需求,好久不写js,有点手生.把代码记录下,方便后续查阅. 这里我用了jQuey,毕竟写起来简洁点.下面直接看效果和代码. 一.效果 ...
- 微信小程序60秒倒计时
微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...
- jQuery实现发送短信验证码后60秒倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- iOS-登录发送验证码时60秒倒计时,直接用
__block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...
- 获取验证码,60秒倒计时js
<input type="button" id="btn" value="免费获取验证码" /><script type= ...
- JS获取短信验证码60秒
<script language="javascript"> function get_mobile_code(){ $.post("{{ ...
- js jquery 按钮点击后 60秒之后才能点击 60秒倒计时
var wait = 60; function time(o) { if (wait == 0) { $(o).attr("disabled", false); $(o).val( ...
- 点击按钮出现60秒倒计时js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- windows 安装 scrapy (python3.7)
今天想要用scrapy爬取数据,想到原来刷过机没有这个库了就重新安装了一遍 安装scrapy 需要的东西 https://pan.baidu.com/s/1kuLvGQBG8tMTCY3WDLuU ...
- js实现对上传图片的路径转成base64编码,并且对图片进行压缩,实现预览功能1
参考 https://blog.csdn.net/qq_31965515/article/details/82975381 https://www.cnblogs.com/zhangdiIT/p/78 ...
- python实现根据前序与中序求后序
我就不板门弄斧了求后序 class Tree(): def __init__(self,x): self.value=x self.left=None self.right=None class So ...
- [转] Vue原理解析——自己写个Vue
一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...
- 示例:在Nuget发布自己的包的步骤
原文:示例:在Nuget发布自己的包的步骤 一.目的:很多时候都在用第三方的Nuget包,现成的轮子可以减少很多工作量,同时我们也可以造轮子供自己和其他人使用,本示例主要演示如何发布dll到Nuget ...
- CLR学习之初识CLR
一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...
- java基础 接口总结
在java9+版本中,接口的内容可以有: 1.成员变量其实是常量,格式:[public] [static] [final] 数据类型 常量名称 = 数组值:注意: 常量必须进行赋值,而且一旦赋值不能变 ...
- 分布式事务:Saga模式
1 Saga相关概念 1987年普林斯顿大学的Hector Garcia-Molina和Kenneth Salem发表了一篇Paper Sagas,讲述的是如何处理long lived transac ...
- 2019-07-30 ThinkPHP文件上传
文件上传就是获取到待上传文件的临时路径,把它移动到服务器下的相应文件夹中. 文件上传,必须在表单中的form标签中写入:enctype="multipart/form-data" ...
- Matlab命令模式
命令模式(Command)将命令封装为对象,实现命令发送者和命令接收者的解耦.线程池.MVC框架用到了命令模式,本文根据以下类图,用matlab实现命令模式. Invoker.m (传递命令对象Inv ...