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

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

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;
}

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

(0)

相关推荐

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

    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'

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

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

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

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

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

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

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

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

  • 微信小程序实现倒计时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=

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

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

  • 微信小程序实现订单倒计时

    本文实例为大家分享了微信小程序实现订单倒计时的具体代码,供大家参考,具体内容如下 之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路 求出发起拼团时间与拼团结束时间的时间差 再将时间差格式化得到我们想要的格式如: 时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数,让这个函数每隔一秒执行一次. 效果图: 2.实现中的难点 若是要实现单个倒计时如60s

  • 微信小程序动态显示项目倒计时效果

    本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>

  • 微信小程序中显示倒计时代码实例

    wxml文件中: <!--倒计时 --> <view class="countDownTimeView countDownAllView" > <view class="voteText countDownTimeText">{{countDownDay}}天</view> <view class="voteText countDownTimeText">{{countDownHour}

  • 微信小程序实现商城倒计时

    本文实例为大家分享了微信小程序实现商城倒计时的具体代码,供大家参考,具体内容如下 index.html: <view class="countDownTimeView pull-left countDownAllView text-left"> <text>倒计时:</text> <text class="voteText countDownTimeText">{{countDownHour}}</text>

  • 微信小程序实现批量倒计时功能

    本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下 //适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */ 1.展示效果如下: 2.wxml代码: <p class="promotion-label-tits">仅{{item.endtime}}</p> 3.js代码: //封装的倒计时方法 //批量倒计时 function grouponcountdown(that, end_

  • 微信小程序动态显示项目倒计时

    本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.展示的效果如下 2.wxml代码: <!--倒计时 --> <text wx:if="{{clock!=''}}">仅剩{{clock}}</text> <text wx:if="{{clock==''}}">已经截止</text> 3.js代码: 在拼团项目中获取到活动结束时间的格式为一下格式 因该格式无法正常计算时

  • 微信小程序手机号验证码登录的项目实现

    本文主要介绍了小程序手机号验证码登录,具体如下: wxml: <view class="content_bottom"> <form bindsubmit="formSubmit"> <view class="field"> <label for="phone">手机号</label> <input class="int" name=&quo

随机推荐