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

3403771864 发布于2022-12-04 11:45 / 602人阅读

　　本篇文章主要为大家讲述关于微信小程序实现获取手机号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: ''
　　})
　　}
　　})
　　},
　　})

　　内容已全部讲述完毕，欢大家继续关注后续更多精彩内容。

GPU云服务器云服务器微信小程序技术实现微信小程序获取js值微信小程序微信小程序支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128398.html

微信小程序如何实现计时器开始和结束功能

　　本篇文章主要为大家介绍微信小程序实现计时器开始和结束整个演示代码过程：　　1、首先，我们先看看微信小程序计时功能，点击开始计时　　2、wxml　　<viewclass='tip'>计时器{{h}}:{{m}}:{{s}}</view> 　　<buttonclass='butbg-blueon'bindtap="taskSt...

3403771864 2022-12-04 11:50 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Carson 2019-07-31 10:21 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

muzhuyu 2019-07-01 12:43 评论0 收藏0