微信小程序实现获取手机号60s倒计时演示代码丨本际云推荐

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

微信小程序实现获取手机号倒计时60秒的代码

本文将为大家详细介绍微信小程序如何实现获取手机号60秒倒计时的具体代码，让大家能够轻松实现这一功能。

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

具体代码实现方式

下面是具体的代码实现方式，涉及到wxml和js两个部分：

1. wxml代码：

2. 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;
   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: ''
    })
   }
  })
  },
})