資訊專欄INFORMATION COLUMN
本篇文章主要為大家講述關于微信小程序實現獲取手機號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: ''
})
}
})
},
})內容已全部講述完畢，歡大家繼續關注后續更多精彩內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128398.html
本篇文章主要為大家介紹微信小程序實現計時器開始和結束整個演示代碼過程： 1、首先，我們先看看微信小程序計時功能，點擊開始計時 2、wxml <viewclass='tip'>計時器{{h}}:{{m}}:{{s}}</view> <buttonclass='butbg-blueon'bindtap="taskSt...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 520·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2177·2023-01-20 08:28
