微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)60s倒計(jì)時(shí)
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)60s倒計(jì)時(shí)的具體代碼,供大家參考,具體內(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({ ? ? /** ? ?* 頁面的初始數(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: ''? ? ? ? ? }) ? ? ? } ? ? }) ? ? }, ?? ? })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序之發(fā)送短信倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí)
- 微信小程序顯示倒計(jì)時(shí)功能示例【測(cè)試可用】
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序注冊(cè)60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能
相關(guān)文章
javascript動(dòng)態(tài)生成樹形菜單的方法
這篇文章主要介紹了javascript動(dòng)態(tài)生成樹形菜單的方法,涉及JavaScript針對(duì)頁面元素與屬性的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11JavaScript面試必備技巧之手寫一個(gè)Promise
很多同學(xué)在面試的時(shí)候都會(huì)被要求手寫一個(gè)Promise,那么今天我總結(jié)了一些手寫Promise的方法,可以跟著我的思路一起來實(shí)現(xiàn)一個(gè)Promise,讓我們的面試更有把握2023-02-02JavaScript實(shí)現(xiàn)篩選數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)篩選數(shù)組,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03基于JS實(shí)現(xiàn)父組件的請(qǐng)求服務(wù)過程解析
這篇文章主要介紹了基于JS實(shí)現(xiàn)父組件的請(qǐng)求服務(wù)過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10淺談JS for循環(huán)中使用break和continue的區(qū)別
這篇文章主要介紹了淺談for循環(huán)中使用break和continue的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)不動(dòng),右側(cè)滑動(dòng))
這篇文章主要介紹了微信小程序MUI側(cè)滑導(dǎo)航菜單,結(jié)合實(shí)例形式分析了微信小程序Popup彈出式,左側(cè)不動(dòng),右側(cè)滑動(dòng)菜單相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01Echarts地圖添加引導(dǎo)線效果(labelLine)
這篇文章主要介紹了Echarts地圖添加引導(dǎo)線效果(labelLine),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09