欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

微信小程序实现发送短信验证码倒计时

程序员文章站 2022-07-06 14:48:56
本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下效果图wxml文件

本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下

效果图

微信小程序实现发送短信验证码倒计时

wxml文件

<view class="container">
  <view class="userinfo">
    <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image>
    <text class="userinfo-nickname">什么</text>
  </view>
  <view class="wrap">
    <view class="tel">
      <input type="number" bindinput="bindtelinput" maxlength="11" 
         placeholder="请输入手机号"
         placeholder-style="color:#c3c6c4;"/>
    </view>
    <view class="ver-code">
      <view class="code">
        <input type="number" bindinput="bindcodeinput" maxlength="6"
               placeholder="请输入验证码"
               placeholder-style="color:#c3c6c4;"/>
      </view>
      <view class="getcode" bindtap="getcode" wx:if="{{countdownnum == 60 || countdownnum == -1}}">
        <button type="primary" plain="true">获取验证码</button>
      </view>
      <view class="getcode" wx:else>
        <button type="primary" plain="true">{{countdownnum}}s后重新获取</button>
      </view>
    </view>
  </view>
  <view class="btn-login" bindtap="login">登录</view>
</view>

js文件

//获取应用实例
const app = getapp()

page({

  /**
   * 页面的初始数据
   */
  data: {
    phone: null, // 手机号
    code: null, // 手机验证码
    countdownnum: 60, // 倒计时初始值
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onload: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onshow: function () {
    
  },
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onready: function () {

  },
  
  /**
   * 用户点击右上角分享
   */
  onshareappmessage: function () {

  },
  // 输入手机号
  bindtelinput: function (e) {
    this.setdata({
      phone: e.detail.value
    })
  },
  // 输入验证码
  bindcodeinput: function (e) {
    this.setdata({
      code: e.detail.value
    })
  },
  // 发送手机验证码
  getcode: function () {
    if (!!this.data.phone) {
      if (!!(/^1[34578]\d{9}$/.test(this.data.phone))) {
        wx.showtoast({
          title: "发送成功",
          icon: "none",
          duration: 1500
        })
        this.countdown()
      } else {
        wx.showtoast({
          title: "请输入正确的手机号",
          icon: "none",
          duration: 1500
        })
      }
    } else {
      wx.showtoast({
        title: "请输入手机号",
        icon: "none",
        duration: 1500
      })
    }
  },
  /**
   * 验证码倒计时
   */
  countdown: function () {
    var _this = this
    var countdownnum = _this.data.countdownnum // 获取倒计时初始值
    var timer = setinterval(function () {
      countdownnum -= 1
      _this.setdata({
        countdownnum: countdownnum
      })
      if (countdownnum <= -1) {
        clearinterval(timer)
        // 取消置顶的setinterval函数将要执行的代码
        _this.setdata({
          countdownnum: 60
        })
      }
    }, 1000)
  },
  // 手机验证码登录
  login: function () {
    if (this.data.phone) {
      if (!!(/^1[34578]\d{9}$/.test(this.data.phone))) {
        if (this.data.code) {
          wx.showtoast({
            title: "登录成功",
            icon: "none",
            duration: 1500
          })
        } else {
          wx.showtoast({
            title: "请输入验证码",
            icon: "none",
            duration: 1500
          })
        }
      } else {
        wx.showtoast({
          title: "请输入正确的手机号",
          icon: "none",
          duration: 1500
        })
      }
    } else {
      wx.showtoast({
        title: "请输入手机号",
        icon: "none",
        duration: 1500
      })
    }
  }
})

wxss文件

.userinfo {
  height: 240rpx;
  margin: 40rpx auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo .userinfo-avatar {
  width: 140rpx;
  height: 140rpx;
  margin: 20rpx;
  border-radius: 50%;
  border: 1rpx solid #dad5d5;
}

.userinfo .userinfo-nickname {
  color: #aaa;
}

.wrap {
  width: 630rpx;
  font-size: 32rpx;
  margin: 80rpx auto 120rpx;
}

.wrap .tel {
  width: 100%;
  height: 68rpx;
  border-bottom: 1rpx solid #dde3ec;
  margin-bottom: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.wrap .ver-code {
  width: 100%;
  height: 68rpx;
  border-bottom: 1rpx solid #dde3ec;
  display: flex;
  justify-content: space-between;
}

.wrap .ver-code .code {

}

.wrap .ver-code .getcode {
  min-width: 190rpx;
  height: 40rpx;
}

.wrap .ver-code .getcode button {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  background: #fff;
  color: #ffaa7f;
  border: none;
  padding: 0;
  margin: 0;
}

.btn-login {
  width: 588rpx;
  height: 88rpx;
  background: #ffaa7f;
  border-radius: 10rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
  margin: 0 auto;
}

.clickclass {
  background: #ea986c;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。