亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)崿F(xiàn)獲取手機號60s倒計時

 更新時間:2022年07月07日 17:25:11   作者:asteriaV  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)獲取手機號60s倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)獲取手機號60s倒計時的具體代碼,供大家參考,具體內(nèi)容如下

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({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? 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位純數(shù)字驗證碼
? ? 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: ''?
? ? ? ? })
? ? ? }
? ? })
?
? },
??
?
})

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實現(xiàn)篩選數(shù)組

    JavaScript實現(xiàn)篩選數(shù)組

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)篩選數(shù)組,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • 基于JS實現(xiàn)父組件的請求服務(wù)過程解析

    基于JS實現(xiàn)父組件的請求服務(wù)過程解析

    這篇文章主要介紹了基于JS實現(xiàn)父組件的請求服務(wù)過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-10-10
  • 淺談JS for循環(huán)中使用break和continue的區(qū)別

    淺談JS for循環(huán)中使用break和continue的區(qū)別

    這篇文章主要介紹了淺談for循環(huán)中使用break和continue的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • 微信小程序MUI側(cè)滑導航菜單示例(Popup彈出式,左側(cè)不動,右側(cè)滑動)

    微信小程序MUI側(cè)滑導航菜單示例(Popup彈出式,左側(cè)不動,右側(cè)滑動)

    這篇文章主要介紹了微信小程序MUI側(cè)滑導航菜單,結(jié)合實例形式分析了微信小程序Popup彈出式,左側(cè)不動,右側(cè)滑動菜單相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下
    2019-01-01
  • Echarts地圖添加引導線效果(labelLine)

    Echarts地圖添加引導線效果(labelLine)

    這篇文章主要介紹了Echarts地圖添加引導線效果(labelLine),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • 詳解jQuery事件

    詳解jQuery事件

    本文主要介紹了jQuery事件的相關(guān)知識。具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • Lottie動畫前端開發(fā)使用技巧

    Lottie動畫前端開發(fā)使用技巧

    這篇文章主要為大家介紹了Lottie動畫前端開發(fā)使用技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-06-06
  • 最新評論