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

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

初始效果

当点击按钮时候设置禁止点击效果：如下图

话不多说，直接上代码

1.wxml部分

<view>
    <block wx:if="{{Num==60 || Num==-1}}">
      <button bindtap="countDown">获取验证码</button>
    </block>
    <block wx:else>
      <button disabled='{{isDisabled}}'>{{Num}}s后重新发送</button>
    </block>
</view>

2.js部分

// pages/push1/push1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    timer: "",
    Num: '60', 
    isDisabled:false
  },
 /**
   * 验证码倒计时
   */
  countDown: function() {
    var that=this
    var Num=that.data.Num
    var isDisabled=this.data.isDisabled
    var timer=setInterval(function(){
        Num-=1;
        that.setData({
          Num:Num,
          isDisabled:true
        })
        if(Num<=-1){
          clearInterval(timer)
          that.setData({
            Num:60,
            isDisabled:false
          })
        }
    },100)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

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

  }
})

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

赞 (0)

相关推荐

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

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

    本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下 效果图 WXML文件 <view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image&

  • 微信小程序实现手机获取验证码倒计时60s

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

    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!-- 手机 -->   <view class="tel">     <!-- 手机图标 -->     <view class="icon_tel">       <image class="tel_image

  • 微信小程序实现验证码倒计时效果

    微信小程序实现验证码倒计时效果

    本文实例为大家分享了微信小程序验证码倒计时效果的具体代码,供大家参考,具体内容如下 如果写过js的倒计时,那么小程序中使用也是差不多的: 代码: data: {       daojishi:60,     inter:''     },   daojishi: function () {     this.data.inter = setInterval((res) => {       this.fun();     }, 1000);   },   fun: function () {  

  • 微信小程序项目实践之验证码倒计时功能

    效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true,  默认是可以点击的 写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin

  • 微信小程序实现验证码获取倒计时效果

    微信小程序实现验证码获取倒计时效果

    本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获

  • 微信小程序的注册页面包含倒计时验证码、获取用户信息

    1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'

  • 微信小程序实现倒计时60s获取验证码

    微信小程序实现倒计时60s获取验证码

    本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length

  • 微信小程序实现验证码倒计时

    本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'>   <form bindsubmit='denglu'>     <view class='list'>       <view class='left'>         <label>手机号:</label>         <input type='number' name=

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

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

    本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码,供大家参考,具体内容如下 初始效果 当点击按钮时候设置禁止点击效果:如下图 话不多说,直接上代码 1.wxml部分 <view>     <block wx:if="{{Num==60 || Num==-1}}">       <button bindtap="countDown">获取验证码</button>     </block>    

  • 微信小程序发送短信验证码完整实例

    微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class="container"> <view class='row'> <input placeholder='请输入姓名' bindinput='bindNameInput'/> </view> <view class='row'> <inpu

  • 微信小程序实现短信登录的实战

    微信小程序实现短信登录的实战

    目录 1.界面效果预览 2.uView安装 3.uView配置 3.1 main.js中引入 3.2 uni.scss中引入 3.3 App.vue中引入 3.4 pages.json中配置 4.短信登录界面 5.点击获取验证码接口 项目要求增加短信登录及人脸识别登录功能,下面我们来实现下短信登录功能 1.界面效果预览 2.uView安装 uView官网:https://www.uviewui.com 以npm安装为例,执行:npm install uview-ui即可 3.uView配置 3.

  • 小程序实现短信登录倒计时

    小程序实现短信登录倒计时

    在平时的短信登录中,当发送短信验证码后会显示倒计时,那么这个倒计时如何实现呢? wxml文件 <view class='Form'> <form bindsubmit="formSubmit" bindreset="formReset" class='forms'> <view class="fidpas"> <input type="number" class="phone

  • swift 3.0 实现短信验证码倒计时功能

    下面一段代码给大家分享swift 3.0 实现短信验证码倒计时功能,具体实例代码如下所示: class TCCountDown { private var countdownTimer: Timer? var codeBtn = UIButton() private var remainingSeconds: Int = 0 { willSet { codeBtn.setTitle("重新获取\(newValue)秒", for: .normal) if newValue <=

  • JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

    1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

随机推荐