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

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

如果写过js的倒计时,那么小程序中使用也是差不多的;

代码:

data: {
      daojishi:60,
    inter:''
    },
  daojishi: function () {
    this.data.inter = setInterval((res) => {
      this.fun();
    }, 1000);
  },
  fun: function () {
    let t = this.data.daojishi;
    t--;
    this.setData({
      daojishi: t
    })
    if (t <= 0) {
      // location.href = "https://www.baidu.com";
      clearInterval(this.data.inter);
      this.setData({
        isyanzhengma: true
      })
    }
  },

手机登录、填手机号获取验证码,倒计时后重新获取效果

描述:

输入正确的手机号并且输入验证码后,手机登录按钮变为红色可点击状态;自动验证输入的手机号是否为合法手机号;点击获取动态码后开始60秒倒计时后才可以再次获取动态码;

效果图:

代码:

html:

<view class="dltel">
  <view class="teltit">手机快捷登录</view>
  <view class="inpbox">
    <input placeholder="请输入手机号" class="inpbtn" type='number' maxlength="11" value="{{mobile}}" bindinput='blurPhone' />
    <text class="dongtaima {{hui?'hui':'red'}}" wx:if="{{isyanzhengma}}" bindtap="dongtaima">获取动态码</text>
    <text class="dongtaima" wx:else>重发({{daojishi}})</text>
  </view>
  <view class="inpbox">
    <input placeholder="请输入验证码" value="{[code]}" maxlength="6" class="inpbtn" bindinput="codetap"  />
  </view>

  <view class="teldl {{dlno ? 'tou50':''}}" bindtap="teldltap">
    <text class="icontxt">手机登录</text>
  </view>
</view>

js:

// pages/dltel/dltel.js

import {
  sendCode,
  mobileLogin
} from "../../utils/requst/api.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    navbarData: {
      isfixed: false,
      iswhite: false, //icon color
      showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
      title: '登录', //导航栏 中间的标题
      backgroundcolor: '#fff',
      isintercept: false //返回拦截
    },

    mobile: '',
    code: '',
    isyanzhengma: true,
    hui: true,
    dlno: true,
    daojishi: 60,
    teltrue: false,
    inter: '',
  },
  // 手机号验证
  blurPhone: function (e) {
    this.setData({
      mobile: e.detail.value
    })
    let phone = this.data.mobile;
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      this.setData({
        teltrue: false,
        hui: true,
      })
      if (phone.length >= 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'none',
          duration: 2000
        })
      }
    } else {
      this.setData({
        teltrue: true,
        hui: false,
      })
      console.log('验证成功', this.data.teltrue)
    }
  },
  dongtaima: function (e) {
    if (this.data.teltrue & !this.data.hui) {
      let params = {
        mobile: this.data.mobile
      }
      sendCode(params).then((res) => {
        console.log(res);
        if (res.data.msg == '发送成功!') {
          wx.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000
          })
          this.setData({
            isyanzhengma: false
          })
          this.daojishi();
        } else {
          wx.showToast({
            title: "发送失败,请重发!",
            icon: "none",
            duration: 2000
          })
        }
      })
    } else if (!this.data.teltrue) {
      wx.showToast({
        title: "请填写正确的手机号!",
        icon: "none",
        duration: 2000
      })
    }
  },
  codetap: function (e) {
    // console.log(e);
    this.setData({
      code: e.detail.value
    })
    if (this.data.teltrue & this.data.code != '') {
      this.setData({
        dlno: false
      })
    }
  },
  daojishi: function () {
    this.data.inter = setInterval((res) => {
      this.fun();
    }, 1000);
  },
  fun: function () {
    let t = this.data.daojishi;
    t--;
    this.setData({
      daojishi: t
    })
    if (t <= 0) {
      // location.href = "https://www.baidu.com";
      clearInterval(this.data.inter);
      this.setData({
        isyanzhengma: true
      })
    }
  },

  teldltap: function () {
    let params = {
      code: this.data.code,
      mobile: this.data.mobile
    }
    if (this.data.teltrue & this.data.code != '') {
      mobileLogin(params).then((res) => {
        // console.log(params);
        // console.log(res);
        if (res.data.message == "ok") { //登录成功 修改参数
          //getApp().globalData.token = res.data.data.token;
          //getApp().globalData.type = res.data.data.type;
          //getApp().globalData.telnum = res.data.data.mobile;
          //wx.setStorageSync('token', res.data.data.token);
          //wx.setStorageSync('type', res.data.data.type);
          //wx.setStorageSync('telnum', res.data.data.mobile);

          //let pages = getCurrentPages(); // 当前页的数据,
          //let prevPage = pages[pages.length - 3]; // 上上页的数据
          //console.log(pages);
          //prevPage.setData({
            //token: res.data.data.token,
            //type: res.data.data.type,
            //telnum: res.data.data.mobile
          //})
          //wx.navigateBack({
            //delta: 2
          //})
        } else {
          wx.showToast({
            title: res.data.msg, // 未成功原因
            icon: "none",
            duration: 2000
          })
        }
      })
    } else if (!this.data.teltrue) {
      wx.showToast({
        title: "请填写正确的手机号!",
        icon: "none",
        duration: 2000
      })
    } else {
      wx.showToast({
        title: "请填写验证码!",
        icon: "none",
        duration: 2000
      })
    }

  },
  
})

css:(less)

@fontcolor:#353535;
@red:#ff2b0a;
.dltel{ 
  position: relative;
  width: 100%;
  height: 100vh;
  padding:0 40rpx;
  box-sizing: border-box;
  .teltit{
    font-size: 50rpx;
    color: @fontcolor;
    line-height: 90rpx;
    margin-top: 35rpx;
    margin-left: 20rpx;
  }
  .inpbox{
    position: relative;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: @fontcolor;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #eee;
    .dongtaima{
      
    }
    .inpbtn{
      width: 430rpx;
      height: 100%;
      margin:0 30rpx;
    }
    .hui{
      color: #888
    }
    .red{
      color: @red;
    }
  }
  .teldl{
    position: relative;
    width: 100%;
    height: 94rpx;
    border-radius: 15rpx;
    line-height: 94rpx;
    text-align: center;
    font-size: 36rpx;
    margin-top:60rpx;
    color: #fff;
    background: @red;
  }
  .tou50{
    background:#ff9584;
  }
}

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

(0)

相关推荐

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

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

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

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

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

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

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

    效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先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'

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

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

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

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

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

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

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

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

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

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

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

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

  • 微信小程序实现简单倒计时功能

    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白界面,过2秒后才显示计时界面,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时. 实现效果:根据案例描述做出如下图效果,初始显示空白界面,2秒后显示计时界面(图1),数字为60,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时(图2). index.wxml <!--index.wxm

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

随机推荐