实现微信小程序获取手机验证码（点击开始倒计时）

wxml部分：

<input placeholder="请输入手机号" bindinput=“phoneInput”></input>
<!-- {{text}}为插值表达式，开始为“获取验证码”，点击后开始倒计时 -->
<button disabled="{{disabled}}" bindtap="getYzm">{{text}}</button>

js部分：

Page({data: {text: ‘获取验证码’, //按钮文字currentTime: 61, //倒计时disabled: false, //按钮是否禁用phone: ‘’ //获取到的手机栏中的值
},
//获取手机栏input中的值
phoneInput: function (e) {this.setData({phone: e.detail.value})
},
//获取验证码getYzm: function() {var that = thisthat.setData({disabled: true,    //点击后先按钮禁用})//提示用户短信验证码已经发送wx.showToast({title: '短信验证码已发送',icon: 'none',duration: 2000});var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值//设置一分钟的倒计时var interval = setInterval(function() {currentTime--; //每执行一次让倒计时秒数减一that.setData({text: currentTime + 's', //按钮文字变成倒计时对应秒数})//如果当秒数小于等于0时if (currentTime <= 0) {clearInterval(interval)  //清楚定时器that.setData({text: '重新发送',currentTime: 61,disabled: false,color: '#59b550'})}}, 1000);},

实现微信小程序获取手机验证码（点击开始倒计时）相关推荐

微信小程序获取手机验证码短信验证码后端功能实现解析
本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...
微信小程序获取手机验证码
一种比较常见的功能获取手机验证码先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题直接上代码吧: <view class='changeInfo'> ...
小程序获取手机验证码
<view class="container"><view class="phone"><view class="bir ...
微信小程序的手机通讯录点击本页面跳转位置的代码详解
最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作 ...
uniapp 微信小程序获取图形验证码解决方案
写这篇博客的初衷是,自己陷入深坑,爬了好久,前端小白,记录一下吧.. **问题:**在登录时候,需要获取图形验证码来验证登录,接口返回的是base64,直接可以用base64来显示图片,没毛病吧,我也 ...
微信小程序获取手机系统信息
使用方法有2种如下方法1 wx.getSystemInfo 异步方法 wx.getSystemInfo({success(res) {console.log(res.model)console. ...
微信小程序获取手机分辨率高度
getPhoneInfo:function(){this.setData({phoneHeight: 750 / wx.getSystemInfoSync().windowWidth * wx.get ...
微信小程序选择手机相册里的图片并上传到页面
微信小程序获取手机相册里的图片并传到页面上 index.wxml代码 // 相册中的照片 <button bindtap='handleChooseAlbum'>选中图片</butt ...
uniapp微信小程序怎样获取宽高？获取系统信息？微信小程序获取用户手机屏幕高度与宽度信息等
第一种方案(推荐) "vw" = "view width" "vh" = "view height" 使用 CSS3 引 ...

实现微信小程序获取手机验证码（点击开始倒计时）

wxml部分：

js部分：

实现微信小程序获取手机验证码（点击开始倒计时）相关推荐

最新文章

热门文章