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/ ...
随机推荐
- idea(2018.3.5)破解
第一步:下载idea,https://www.jetbrains.com/idea/download/#section=windows,双击进行安装 第二步:下载破解的jar包:链接:https:// ...
- C++随机数笔记
版权声明:本文为CSDN博主「candyliuxj」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/can ...
- 不同路径II --动态规划
一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 现在考虑网 ...
- jsGrid使用入门
jsGrid使用入门 原创蓝天上的一朵云 本文链接:https://blog.csdn.net/u012846041/article/details/82735811 jsGrid资源地址: http ...
- Vert.x Web
https://vertx.io/docs/vertx-web/java/ Vert.x-Web是一组用于使用Vert.x构建Web应用程序的构建块.将其视为瑞士军刀,用于构建现代,可扩展的网络应用程 ...
- 拷贝 vs 赋值
其实我只要关注两个动作就够了: 拷贝.赋值= (而构造.析构的步骤都是没疑问的.) ——> 赋值= 都是显式调用的, 而拷贝构造可以显示调,也可能隐式被调. 下图错误 ...
- Java自学-异常处理 处理
Java的异常处理办法 try catch throws 异常处理常见手段: try catch finally throws 步骤 1 : try catch 1.将可能抛出FileNotFound ...
- 手撕面试官系列(一):spring108道面试题合集
前言 想必各位程序员已经开始准备金九银十的秋招了,创建这个这个系列文章的目的就是为了帮助大家解决面试的问题,系列文章将会一直更新,大家如果觉得不错可以关注我并转发,让更多程序兄弟看到~接下来我们进入正 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- RPC相关知识
为什么要进行系统拆分,为什么要用dubbo RPC的由来,基本架构,实现原理,整个调用过程经历了哪几步 Java动态代理及 RPC框架介绍 一篇文章了解RPC框架原理 dubbo详解及demo实例 d ...