广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现获取手机号60s倒计时
  • 169
分享到

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

2024-04-02 19:04:59 169人浏览 独家记忆
摘要

本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下 1.效果:点击获取》60s倒计时》重新获取 2.wxml <view class

本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下

1.效果:点击获取》60s倒计时》重新获取

2.wxml

<view class="cu-fORM-group" style="border-top: 1rpx solid #eee;">
      <view class="title">手机号</view>
      <input name='phone' placeholder="请输入新手机号"  value="{{phone}}" type="number" bindinput="inputBindPhone" ></input>
    </view>  
 
<view class="cu-form-group" style="border-bottom: 1rpx solid #eee;">
      <view class="title">验证码</view>
      <input name='code' placeholder="请输入验证码" value="{[code]}" type="number" bindinput="inputBindCode"></input>
      <button class="cu-btn shadow {{disabled ? '':'bg-blue'}}" style="width:180rpx;height:72rpx;"   bindtap='sendReGIStCode'>{{time}}</button>
</view>

3.js

Page({
 
  
  data: {
    disabled:false,
    time: '点击获取',
    currentTime: 60,
    phone: '',
    code: '',
  },
 
  
  // 新手机号
  inputBindPhone: function (e) {
    console.log(e.detail.value)
    this.setData({
      phone: e.detail.value
    })
  },
  // 验证码
  inputBindCode: function (e) {
    console.log(e.detail.value)
    this.setData({
      code: e.detail.value
    })
  },
 
  sendRegistCode: function(e){
    var that = this;
    var currentTime = that.data.currentTime;
      var interval;
      that.setData({
        time: currentTime + 's',
        disabled: true,
      })
      interval = setInterval(function () {
        that.setData({
          time: (currentTime - 1) + ' s'
        })
        currentTime--;
        if (currentTime <= 0) {
          clearInterval(interval)
          that.setData({
            time: '重新获取',
            currentTime: 60,
            disabled: false
          })
        }
      }, 1000)
},
 
 
  formSubmit: function (e) {
    var that = this,
      value = e.detail.value,
      formId = e.detail.formId;
    // value.phone = this.data.phone
    // value.code = this.data.code
 
 
    var mPattern = /^1[3-9]\d{9}$/; //手机号码
    var authReg = /^\d{4}$/; //4位纯数字验证码
    var notempty = /^\\S+$/; //非空
 
    if (this.data.phone == '' || this.data.phone == undefined) {
      return wx.showToast({
        title: '请输入手机号码',
        icon: 'none'
      })
    } else if (!mPattern.test(this.data.phone)) {
      return wx.showToast({
        title: '请输入正确的手机号码',
        icon: 'none'
      })
 
    } else {
      value.phone = this.data.phone
      console.log('value.phone', value.phone)
    }
 
 
    if (value.code == '' || value.code == undefined) {
      return wx.showToast({
        icon: 'none',
        title: '请输入验证码',
      });
    } else if (!authReg.test(this.data.code)) {
      return wx.showToast({
        title: '请输入正确的验证码',
        icon: 'none'
      })
 
    } else {
      value.code = this.data.code
      console.log('value.code', value.code)
    }
 
 
    wx.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000,
      success: function () {
         console.log(value)
        that.setData({
          code: '',
          phone: '' 
        })
      }
    })
 
  },
  
 
})

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

--结束END--

本文标题: 微信小程序实现获取手机号60s倒计时

本文链接: https://www.lsjlt.com/news/153764.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现获取手机号60s倒计时
    本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下 1.效果:点击获取》60s倒计时》重新获取 2.wxml <view class...
    99+
    2022-11-13
  • 微信小程序实现手机获取验证码倒计时60s
    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!...
    99+
    2022-11-13
  • 微信小程序实现倒计时
    本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下 大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。 直接上代码吧 <view cl...
    99+
    2022-11-13
  • 企业微信小程序获取手机号?
    一、确定小程序是开发企业内部应用,还是开发第三方应用。  如果是开发企业内部应用,也就是应用自建的可以使用  wx.qy.getMobile 这个api 去获取手机号wx.qy.getMobile 调用前提: 1、必须先调用过wx.qy.l...
    99+
    2023-09-15
    微信小程序 小程序
  • 微信小程序实现答题倒计时
    想做一个答题的计时器效果,本文为大家分享了微信小程序实现答题倒计时的具体代码,供大家参考,具体内容如下 思路 利用canvas不停的画弧线 效果 代码 wxml <view...
    99+
    2022-11-13
  • 微信小程序如何实现倒计时
    这篇文章主要介绍“微信小程序如何实现倒计时”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序如何实现倒计时”文章能帮助大家解决问题。直接上代码吧<view class=&quo...
    99+
    2023-06-30
  • uniapp+.net core实现微信小程序获取手机号功能
    目录获取手机号注意:使用方法前端templatejs后端appsetting配置Startup.csGlobalContext.cs调用获取截图获取手机号 从基础库 2.21.2 开...
    99+
    2022-11-13
  • 微信小程序登录及获取手机号码
    前端:微信先授权登录后再授权获取手机号码 后端:先微信登录获取openid返回前端,前端再传递手机号码code给后端获取手机号码并在本地数据量注册用户信息,需提供2个接口 第一步:先通过code微信授权登录获取openid $url = '...
    99+
    2023-08-31
    微信小程序 php
  • 微信小程序获取验证码60秒倒计时功能
    目录效果图index.wxmlindex.jsindex.wxss效果图 index.wxml <view class="Info"> ...
    99+
    2023-05-17
    微信小程序60秒倒计时 微信小程序验证码倒计时
  • 小程序获取手机验证码倒计时的方法
    本文实例为大家分享了小程序获取手机验证码倒计时的具体代码,供大家参考,具体内容如下 test: .wxss .bind_input{ width: 450rpx; height: 8...
    99+
    2022-11-13
    小程序手机验证码 小程序获取验证码 小程序验证码倒计时
  • 微信小程序实现验证码倒计时
    本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'>   <form...
    99+
    2022-11-13
  • 微信小程序获取手机号的踩坑记录
    前言 最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况。研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮...
    99+
    2022-11-12
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2022-11-11
  • 微信小程序获取手机号报错getPhoneNumber:fail no permission
    目录 一、问题描述二、解决方法 ...
    99+
    2023-08-30
    微信小程序 微信认证
  • 微信小程序实现短信验证码倒计时
    本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码,供大家参考,具体内容如下 初始效果 当点击按钮时候设置禁止点击效果:如下图 话不多说,直接上代码 1.wxml部分 ...
    99+
    2022-11-13
  • 微信小程序怎么实现获取用户手机号码功能
    本篇内容主要讲解“微信小程序怎么实现获取用户手机号码功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现获取用户手机号码功能”吧!前言获取用户手机号码 分为以下几步:第一点击页面...
    99+
    2023-07-02
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2022-11-13
  • 微信小程序获取手机号的完整实例(Java后台实现)
    目录小程序后端接口总结小程序端:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/get...
    99+
    2022-11-13
  • 微信小程序如何同时获取用户信息和用户手机号
    今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号。 1. 当我点击快捷登录...
    99+
    2022-11-12
  • 微信小程序怎么获取用户的手机号码
    微信小程序中获取用户手机号码的方式有:1.用户页面通过弹出获取;2.在小程序制作页面中,添加登录选项卡,用于获取用户手机号码;微信小程序中获取用户手机号码的方式有以下两种当用户进入小程序后,通过弹出获取手机号提醒,用户点击授权,即可获得用户...
    99+
    2022-10-21
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作