微信小程序?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({
?
? /**
? ?* 頁(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: ''?
? ? ? ? })
? ? ? }
? ? })
?
? },
??
?
})以上就是本文的全部?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)購(gòu)或秒殺批量倒計(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)文章
ES6 Object屬性新的寫法實(shí)例小結(jié)
這篇文章主要介紹了ES6 Object屬性新的寫法,結(jié)合實(shí)例形式總結(jié)分析了ES6中object屬性的常見簡(jiǎn)化寫法,需要的朋友可以參考下2019-06-06
Three.js如何用軌跡球插件(trackball)增加對(duì)模型的交互功能詳解
這篇文章主要給大家介紹了關(guān)于Three.js如何用軌跡球插件,也就是trackball增加對(duì)模型的交互功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-09-09
js canvas畫布實(shí)現(xiàn)高斯模糊效果
這篇文章主要為大家詳細(xì)介紹了js canvas畫布實(shí)現(xiàn)高斯模糊效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11
JS根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作
這篇文章主要介紹了js根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
javascript iframe中打開文件,并檢測(cè)iframe存在否
從iframe中打開文件,并檢測(cè)iframe存在否如果說(shuō)只是檢測(cè)頁(yè)面存在否,直接設(shè)置target用偽協(xié)議就可以解決了...2008-12-12
javascript使用正則表達(dá)式檢測(cè)IP地址
這篇文章主要介紹了javascript使用正則表達(dá)式檢測(cè)IP地址的方法,需要的朋友可以參考下2014-12-12

