微信小程序实现获取手机号60s倒计时

本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下

1.效果:点击获取》60s倒计时》重新获取

2.wxml

<view class="cu-form-group" style="border-top: 1rpx solid #eee;">       <view class="title">手机号</view>       <input name='phone' placeholder="请输入新手机号"  value="{{phone}}" type="number" bindinput="inputBindPhone" ></input>     </view>   <view class="cu-form-group" style="border-bottom: 1rpx solid #eee;">       <view class="title">验证码</view>       <input name='code' placeholder="请输入验证码" value="{[code]}" type="number" bindinput="inputBindCode"></input>       <button class="cu-btn shadow {{disabled ? '':'bg-blue'}}" style="width:180rpx;height:72rpx;"   bindtap='sendRegistCode'>{{time}}</button> </view>

3.js

Page({   /**    * 页面的初始数据    */   data: {     disabled:false,     time: '点击获取',     currentTime: 60,     phone: '',     code: '',   },   // 新手机号   inputBindPhone: function (e) {     console.log(e.detail.value)     this.setData({       phone: e.detail.value     })   },   // 验证码   inputBindCode: function (e) {     console.log(e.detail.value)     this.setData({       code: e.detail.value     })   },   sendRegistCode: function(e){     var that = this;     var currentTime = that.data.currentTime;       var interval;       that.setData({         time: currentTime + 's',         disabled: true,       })       interval = setInterval(function () {         that.setData({           time: (currentTime - 1) + ' s'         })         currentTime--;         if (currentTime <= 0) {           clearInterval(interval)           that.setData({             time: '重新获取',             currentTime: 60,             disabled: false           })         }       }, 1000) },   formSubmit: function (e) {     var that = this,       value = e.detail.value,       formId = e.detail.formId;     // value.phone = this.data.phone     // value.code = this.data.code     var mPattern = /^1[3-9]\d{9}$/; //手机号码     var authReg = /^\d{4}$/; //4位纯数字验证码     var notempty = /^\\S+$/; //非空     if (this.data.phone == '' || this.data.phone == undefined) {       return wx.showToast({         title: '请输入手机号码',         icon: 'none'       })     } else if (!mPattern.test(this.data.phone)) {       return wx.showToast({         title: '请输入正确的手机号码',         icon: 'none'       })     } else {       value.phone = this.data.phone       console.log('value.phone', value.phone)     }     if (value.code == '' || value.code == undefined) {       return wx.showToast({         icon: 'none',         title: '请输入验证码',       });     } else if (!authReg.test(this.data.code)) {       return wx.showToast({         title: '请输入正确的验证码',         icon: 'none'       })     } else {       value.code = this.data.code       console.log('value.code', value.code)     }     wx.showToast({       title: '提交成功',       icon: 'success',       duration: 2000,       success: function () {          console.log(value)         that.setData({           code: '',           phone: ''          })       }     })   }, })

推荐阅读

    678元的索泰zt-h55d3-m1dh主板

    678元的索泰zt-h55d3-m1dh主板,,近日,索泰zt-h55d3-m1dh主板已经运到市场,这是基于英特尔H55芯片组。它支持LGA 1156接口的酷睿i系列处理器

    学习写字楼新选择6000元主流配置

    学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办公和娱乐平台,充分考虑办公室的办公需求和娱乐需求,以约6000元的预算和cost-e

    金蝶专业版审核以前期间的单据

    金蝶专业版审核以前期间的单据,,1.之前会计是手工做账,现在是金蝶做账,需要什么资料入初始数据在金碟里把你手工帐的科目设置好,然后启用帐

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    金蝶担保机构业务管理系统

    金蝶担保机构业务管理系统,,1.金蝶财务软件怎么使用?软件使用方法 使用需要先登陆到数据库,可只导出V3数据或只导出最新年度数据。功能介绍

    wps如何合并章节

    wps如何合并章节,WPS教程,1.WPS表格如何实现单元格合并?WPS 表格在新版本中增加了“合并单元格”系列按钮,同时配有下拉菜单和快捷键。新增