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

 更新时间:2022年05月24日 09:02:29   作者:小丫么小菜菜  
这篇文章主要为大家详细介绍了微信小程序实现验证码倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

wxml代码:

<view class='container'>
  <form bindsubmit='denglu'>
    <view class='list'>
      <view class='left'>
        <label>手机号:</label>
        <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='请输入手机号'></input>
      </view>
      <view class='right'></view>
    </view>
    <view class='list border'>
      <view class='left'>
        <label>验证码:</label>
        <input type='number' name="code" placeholder='请输入验证码'></input>
      </view>
      <view class='right'>
        <button class='send' wx:if="{{isShow}}" catchtap='send'>发送验证码</button>
        <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒后重新发送</button>
      </view>
    </view>
    <button form-type='submit' class='btn'>登录</button>
  </form>
</view>

js代码:

const app = getApp()
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    countdown: 60,
    isShow:true
  },
  //倒计时
  count:function(that){
    var interval = setInterval(function () {
      var countdown = that.data.countdown;
      if (countdown == 0) {
        that.setData({
          isShow: true,
          countdown: 60
        })
        clearInterval(interval)
      } else {
        countdown--;
        that.setData({
          isShow: false,
          countdown: countdown
        })
      }
    }, 1000)
  },
  //设置手机号
  shj: function (e) {
    this.setData({
      tel: e.detail.value
    })
  },
  //获取验证码
  send: function () {
    var that=this;
    wx.showToast({
      title: '验证码发送成功',
      icon: 'none',
      duration: 1000,
      success: function () {
        that.count(that)
      }
    })
  }, 
  //登录
  denglu:function(e){
     console.log(e.detail.value)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
 
})

wxss代码:

.list{
  background-color: white;
  font-size: 32rpx;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center
}
.border{
  border-top: 1rpx solid #f4f4f4
}
.left{
  display: flex;
  align-content: center;
  align-items: center
}
.left>label{
  width: 140rpx
}
.left>input{
  font-size: 30rpx
}
.right{
  width:240rpx;
  text-align: right;
  color: #ff9900;
  font-size: 30rpx
}
.send{
  background-color: #3296fa;
  color: white;
  line-height: 60rpx;
  font-size: 30rpx;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0
}
.btn{
  background-color: #3296fa;
  color: white;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 0;
  margin-top: 100rpx;
}

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

相关文章

  • JQuery加载图片自适应固定大小的DIV

    JQuery加载图片自适应固定大小的DIV

    在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div大小时图片 自动适应div 的大小,实现思路如下,感兴趣的朋友可以了解下
    2013-09-09
  • 总结javascript中的六种迭代器

    总结javascript中的六种迭代器

    本文总结了javascript中的六种迭代器的使用实例,分别是forEach迭代器、every迭代器、some迭代器、reduce迭代器、map迭代器和fiter迭代器,有需要的小伙伴们可以参考借鉴。
    2016-08-08
  • JS中typeof与instanceof之间的区别总结

    JS中typeof与instanceof之间的区别总结

    本文是对JS中typeof与instanceof之间的区别进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • javascript简单写的判断电话号码实例

    javascript简单写的判断电话号码实例

    这篇文章主要介绍了javascript简单写的判断电话号码实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • JS 巧妙获取剪贴板数据 Excel数据的粘贴

    JS 巧妙获取剪贴板数据 Excel数据的粘贴

    最近需要在浏览器端实现excel数据的粘贴,一开始去找获取剪贴板数据的方法。但是在浏览器端,JS去取是受安全限制的。
    2009-07-07
  • 能够让你事半功倍的JS utils工具函数详解

    能够让你事半功倍的JS utils工具函数详解

    js-utils封装了常用的工具函数,开箱即用,下面这篇文章主要给大家介绍了关于能够事半功倍的JS utils工具函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 嵌入式iframe子页面与父页面js通信的方法

    嵌入式iframe子页面与父页面js通信的方法

    这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript导航脚本判断当前导航

    JavaScript导航脚本判断当前导航

    这篇文章主要介绍了JavaScript导航脚本判断当前导航的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • js使用数组判断提交数据是否存在相同数据

    js使用数组判断提交数据是否存在相同数据

    判断提交数据是否存在相同数据,在本文将为大家介绍使用数组做到这一点,感兴趣的朋友可以参考下
    2013-11-11
  • Javascript实现图片懒加载的示例代码

    Javascript实现图片懒加载的示例代码

    最近公司和第三方材料供应商对接开发了物资集采平台,其中有个功能需求需要展示数百张材料信息图片,有时页面会出现卡顿的情况,并使用了图片懒加载的方式进行了优化,下面把方法分享给大家一起学习,感兴趣的小伙伴跟着小编一起来看看吧
    2024-12-12

最新评论