微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)60s倒計(jì)時(shí)演示代碼

3403771864 發(fā)布于2022-12-04 11:45 / 615人閱讀

　　本篇文章主要為大家講述關(guān)于微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)60s倒計(jì)時(shí)的具體代碼，現(xiàn)在我們看看具體內(nèi)容：

　　1.效果：點(diǎn)擊獲取》60s倒計(jì)時(shí)》重新獲取

　　2.wxml

　　<view class="cu-form-group" style="border-top: 1rpx solid #eee;">
　　<view class="title">手機(jī)號(hào)</view>
　　<input name='phone' placeholder="請(qǐng)輸入新手機(jī)號(hào)" value="{{phone}}" type="number" bindinput="inputBindPhone" ></input>
　　</view>
　　<view class="cu-form-group" style="border-bottom: 1rpx solid #eee;">
　　<view class="title">驗(yàn)證碼</view>
　　<input name='code' placeholder="請(qǐng)輸入驗(yàn)證碼" 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({
　　/**
　　* 頁(yè)面的初始數(shù)據(jù)
　　*/
　　data: {
　　disabled:false,
　　time: '點(diǎn)擊獲取',
　　currentTime: 60,
　　phone: '',
　　code: '',
　　},
　　// 新手機(jī)號(hào)
　　inputBindPhone: function (e) {
　　console.log(e.detail.value)
　　this.setData({
　　phone: e.detail.value
　　})
　　},
　　// 驗(yàn)證碼
　　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}$/; //手機(jī)號(hào)碼
　　var authReg = /^\d{4}$/; //4位純數(shù)字驗(yàn)證碼
　　var notempty = /^\\S+$/; //非空
　　if (this.data.phone == '' || this.data.phone == undefined) {
　　return wx.showToast({
　　title: '請(qǐng)輸入手機(jī)號(hào)碼',
　　icon: 'none'
　　})
　　} else if (!mPattern.test(this.data.phone)) {
　　return wx.showToast({
　　title: '請(qǐng)輸入正確的手機(jī)號(hào)碼',
　　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: '請(qǐng)輸入驗(yàn)證碼',
　　});
　　} else if (!authReg.test(this.data.code)) {
　　return wx.showToast({
　　title: '請(qǐng)輸入正確的驗(yàn)證碼',
　　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: ''
　　})
　　}
　　})
　　},
　　})

　　內(nèi)容已全部講述完畢，歡大家繼續(xù)關(guān)注后續(xù)更多精彩內(nèi)容。