小程序60s验证码倒计时实现

流程：
1.验证码时间期限为60秒。

2.点击获取验证码开始倒计时。

3.倒计时为0秒时,重新展示获取验证码。

代码:
wxml:

<view class="verify_content"><view><image src="http://ico.dongtiyan.com/tu-31.png"></image><input placeholder="请输入验证码" value="" placeholder-class="color: #999999;"></input></view><block wx:if="{{countNum==60 || countNum==-1}}"><view bindtap="timeKeep" style="color: #F73A3F;;">获取验证码</view></block><block wx:else><view style="color: rgb(165, 165, 165)">{{countNum}}s后重新发送</view></block></view>

wxss:

.verify_content view:nth-child(1) {display: flex;align-items: center;
}
.verify_content view:nth-child(1) input {width: 260rpx;
}
.verify_content view:nth-child(1) image {width: 26rpx;height: 28rpx;margin-right: 18rpx;
}

js:

data: {timer: "",            // 定时器名字countNum: '60', // 倒计时初始值},
timeKeep() {let countNum = this.data.countNum;             // 获取倒计时初始值let timer = setInterval(()=> {countNum -= 1;this.setData({countNum})if(countNum < 0) {clearInterval(timer);// 取消置顶的setInterval函数将要执行的代码this.setData({countNum: 60,})}}, 1000)},

小程序60s验证码倒计时实现相关推荐

微信小程序获取验证码倒计时
实现效果图使用方法: setInterval demo:(如果对 setInterval不了解的可以先百度下) xml 中写一个按钮: <view class="container& ...
微信小程序开发之倒计时定时器
微信小程序获取验证码,倒计时60秒!这个在微信中也经常遇到,因此给大家分享出来,逻辑就不过多的解释.这个是自定义的方法,大家在调用的时候,直接绑定在按钮上,直接this.getcode()一下就可以调 ...
微信小程序发送验证码
记录一下,小程序发送验证码的小案例.废话不多说,直接撸代码... 1.效果图如下 wxml: <view class='header'> <input type='number' p ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
微信小程序多个倒计时
wechatide://minicode/QUV0k2mG7R2Q 这是微信小程序的一个倒计时代码片段,但在苹果手机里,这个倒计时并不会显示!! 原因是在苹果手机里时间戳的转换问题!! 可兼容苹果安卓 ...
小程序抢购页面倒计时定时器
小程序抢购页面倒计时定时器 from:我是前端美少女
html倒计时代码+微信可用,微信小程序动态显示项目倒计时效果
本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: 剩余时间:已经截止剩余时间: ...
微信小程序，验证码输入框
微信小程序,验证码输入效果预览写了个小程序验证码输入的小demo,用的方法是比较猥琐的隐藏input框,输入内容绑定的方法 wxml代码 <view class="wx-page- ...
微信小程序之订单倒计时实现
倒计时之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路: 求出发起拼团时间与拼团结束时间的时间差 ...

小程序60s验证码倒计时实现

小程序60s验证码倒计时实现相关推荐

最新文章

热门文章