微信小程序获取验证码倒计时

最新推荐文章于 2024-08-05 07:15:52 发布

你就是我心中的棉花糖

最新推荐文章于 2024-08-05 07:15:52 发布

阅读量587

点赞数

分类专栏：微信小程序文章标签： vue.js 正则表达式前端 javascript visual studio code

本文链接：https://blog.csdn.net/h643342713/article/details/119178896

版权

本文介绍了如何在微信小程序中使用JavaScript实现验证码倒计时功能，通过结合Vue.js和正则表达式，实现前端界面与逻辑的交互。文章以实例展示了在index.wxml中定义按钮并初始化，然后在index.js中实现倒计时的关键代码。

摘要由CSDN通过智能技术生成

很久没有更新过文章了，当然也很久没有登陆过了，接下来的日子，会不定期更新，但愿能够对大家有所帮助。

获取验证码倒计时，最简单的就是setInterval的应用

index.wxml 定义一个按钮设置初始化

 <button class='model-sendMsg' disabled="{
  {isClick}}" bindtap="sendMsg">{
  {btnText}}</button>

重点来了

index.js

var timeInterval = null //倒计时函数

Page({

  /**

   * 页面的初始数据

   */

  data: {

    modelPhone: "",//手机号

    verificationCode:"",//验证码

    btnText: '获取验证码', //倒计时 

    currentTime: 60,//限制60s

    isClick: false,//获取验证码按钮，默认允许点击

  },

 // 获取验证码

  sendMsg() {

  //第一步当然是验证手机号的合法性了，这里就不在累赘

 //第二步获取验证码

    let that = this;

//设置button是否可点击，倒计时期间不可点击

    that.setData({

      isClick: true,

    })

    var currentTime = that.data.currentTime;

//开始倒计时

    timeInterval = setInterval(function () {