微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
更新時(shí)間：2022年05月24日 08:51:45 作者：亭有枇杷樹(shù)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼后倒計(jì)時(shí)60s，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下
功能展示：
WXML：
<view class="all">
? <!-- 手機(jī) -->
? <view class="tel">
? ? <!-- 手機(jī)圖標(biāo) -->
? ? <view class="icon_tel">
? ? ? <image class="tel_image" src="https://image.flaticon.com/icons/svg/660/660439.svg"></image>
? ? ? <text class="tel_words">手機(jī)</text>
? ? </view>
? ? <!-- 內(nèi)容 -->
? ? <view class="content_tel">
? ? ? <view class="adress">
? ? ? ? <text>＋86</text>
? ? ? </view>
? ? ? <view class="sign">
? ? ? ? <text>▼</text>
? ? ? </view>
? ? ? <view>
? ? ? ? <input class="input_tel" placeholder="請(qǐng)輸入手機(jī)號(hào)" focus="{{focus}}" ?value="{{tel}}" bindinput="watchTel"/>
? ? ? </view>
? ? </view>
? ? <!-- 下劃線 -->
? ? <view class="line_adress"></view>
? ? <view class="line_input"></view>
? </view>
?
? <!-- 驗(yàn)證碼 -->
? <view class="VerificationCode ">
? ? <!-- 驗(yàn)證碼圖標(biāo) -->
? ? <view class="icon_VerificationCode">
? ? ? <image class="tel_image" src="https://image.flaticon.com/icons/png/128/179/179640.png"></image>
? ? ? <text class="tel_words">驗(yàn)證碼</text>
? ? </view>
?
? ? <!-- 內(nèi)容 -->
? ? <view class="content_VerificationCode">
? ? ? <view>
? ? ? ? <input class="input_VerificationCode" placeholder="請(qǐng)輸入驗(yàn)證碼" focus="{{focus}}" ?value="{{VerificationCode}}" bindinput="watchVerificationCode"/>
? ? ? </view>
? ? </view>
? ? <!-- 點(diǎn)擊獲取驗(yàn)證碼 -->
? ? <view>
? ? ? <button class="button_VerificationCode" size="mini" style="background-color:{{color}}" disabled="{{disabled}}" bindtap="bindButtonTap">
? ? ? ? <view class="world">
? ? ? ? ? <text class="button_world">{{text}}</text>
? ? ? ? </view>
? ? ? </button>?
? ? </view>
? ? <!-- 下劃線 -->
? ? <view class="line_VerificationCode"></view>
? </view>
?
? <!-- 提交按鈕 -->
? <view>
? ? <button class="button_submission" type="primary" size="default" bindtap="ChangeTel">
? ? ? <text class="button_submissionWorld">提交</text>
? ? </button>
</view>WXSS：
.all{
? height: 100vh;
? width: 100vw;
? /* border: 2rpx solid blue; */
}
?
.tel{
? position: relative;
? top: 10vh;
? left: 10vw;
? height: 16vh;
? width: 80vw;
? /* border: 2rpx solid red; */
}
?
.icon_tel{
? position: absolute;
? top: 1vh;
? left: 2vh;
? height: 6vh;
? width: 24vw;
? /* border: 2rpx solid red; */
}
?
.tel_image{
? position: absolute;
? height: 6vh;
? width: 7vw;
? /* border: 2rpx solid red; */
}
?
.tel_words{
? position: absolute;
? left: 9vw;
? height: 6vh;
? width: 15vw;
? top: 1vh;
? /* border: 2rpx solid red; */
}
?
.content_tel{
? position: absolute;
? top: 8vh;
? left: 2vw;
? height: 6vh;
? width: 75vw;
? /* border: 2rpx solid blue; */
}
?
.line_adress{
? position: absolute;
? height: 3rpx;
? width: 21vw;
? left: 2vw;
? bottom: 0.5vh;
? background:gainsboro;
}
?
.line_input{
? position: absolute;
? height: 3rpx;
? width: 47vw;
? left: 25vw;
? bottom: 0.5vh;
? background:gainsboro;
}
?
.line_VerificationCode{
? position: absolute;
? height: 3rpx;
? width: 47vw;
? left: 2vw;
? bottom: 0.5vh;
? background:gainsboro;
}
?
.adress{
? position: absolute;
? top: 1vh;
? height: 5vh;
? width: 20vw;
? /* border: 2rpx solid gold; */
? text-align: center;
}
?
.sign{
? position: absolute;
? height: 5vh;
? width: 4vw;
? top: 2vh;
? left: 20vw;
? /* border: 2rpx solid greenyellow; */
? text-align: center;
? align-items: center;
? font-size: 22rpx;
}
?
.input_tel{
? position: absolute;
? height: 6vh;
? width: 47vw;
? left: 28vw;
? /* border: 2rpx solid red; */
}
?
.input_VerificationCode{
? position: absolute;
? height: 6vh;
? width: 47vw;
? left: 2vw;
}
?
.VerificationCode{
? position: relative;
? top: 15vh;
? left: 10vw;
? height: 16vh;
? width: 80vw;
? /* border: 2rpx solid red; */
}
?
.icon_VerificationCode{
? position: absolute;
? top: 1vh;
? left: 3vh;
? height: 6vh;
? width: 24vw;
? /* border: 2rpx solid red; */
}
?
.content_VerificationCode{
? position: absolute;
? top: 8vh;
? left: 2vw;
? height: 6vh;
? width: 47vw;
? /* border: 2rpx solid blue; */
}
?
.button_VerificationCode{
? /* border: 2rpx solid red; */
? position: absolute;
? top: 7.5vh;
? left: 50vw;
? height: 8vh;
? width: 32vw;
? border-radius:60rpx;
? background: red;
}
?
.world{
? position: absolute;
? height: 70rpx;
? width: 160rpx;
? top: 10rpx;
? left: 40rpx;
}
?
.button_world{
? font-size: 31rpx;
? text-align: center;
? align-items: center;
? color: white;
}
?
.button_submission{
? position: absolute;
? height: 7vh;
? width: 60vw;
? top: 55vh;
? left: 20vw;
? /* border: 2rpx solid red; */
}
?
.button_submissionWorld{
? position: absolute;
? left: 26vw;
? font-size: 35rpx;
? /* border: 2rpx solid red; */
? top: -2rpx;
}JS：
var qcloud = require('../../vendor/wafer2-client-sdk/index')
var config = require('../../config')
var util = require('../../utils/util.js')
?
Page({
? data: {
? ? VerificationCode: '',
? ? text:'獲取驗(yàn)證碼',//按鈕文字
? ? currentTime: 61, //倒計(jì)時(shí)
? ? disabled: false, //按鈕是否禁用
? ? tel: '' //獲取到的手機(jī)欄中的值
? },
?
? // 手機(jī)號(hào)監(jiān)聽(tīng)輸入
? watchTel: function (event) {
? ? console.log(event);
? ? this.data.tel = event.detail.value
? ? this.setData({
? ? ? tel: event.detail.value
? ? })
? },
?
? // 驗(yàn)證碼監(jiān)聽(tīng)輸入
? watchVerificationCode: function (event) {
? ? console.log(event);
? ? this.data.VerificationCode = event.detail.value
? ? this.setData({
? ? ? VerificationCode: event.detail.value
? ? })
? },
?
? //提交修改密碼表單
? ChangeTel: function () {
? ? var that = this
? ? if (this.data.VerificationCode != 10086) {
? ? ? wx.showToast({
? ? ? ? icon: 'none',
? ? ? ? title: '驗(yàn)證碼輸入錯(cuò)誤！'
? ? ? })
? ? }
? ? else {
? ? ? util.showBusy('請(qǐng)求中...')
? ? ? that.data.userpwd = that.data.renewpwd
? ? ? qcloud.request({
? ? ? ? url: `${config.service.host}/weapp/UserChangeTel`,
? ? ? ? header: {
? ? ? ? ? 'content-type': 'application/x-www-form-urlencoded'
? ? ? ? },
? ? ? ? method: "POST",
? ? ? ? data: {
? ? ? ? ? tel: that.data.tel
? ? ? ? },
? ? ? ? login: false,
? ? ? ? success(result) {
? ? ? ? ? util.showSuccess('請(qǐng)求成功完成')
? ? ? ? ? that.setData({
? ? ? ? ? ? requestResult: JSON.stringify(result.data)
? ? ? ? ? })
? ? ? ? ? console.log(result);
? ? ? ? },
? ? ? ? fail(error) {
? ? ? ? ? util.showModel('請(qǐng)求失敗', error);
? ? ? ? ? console.log('request fail', error);
? ? ? ? }
? ? ? }),
? ? ? ? that.setData({
? ? ? ? ? tel: '',
? ? ? ? ? VerificationCode: ''
? ? ? ? })
? ? }
? },
?
? //獲取驗(yàn)證碼按鈕
? bindButtonTap: function () {
? ? var that = this;
? ? that.setData({
? ? ? disabled: true, //只要點(diǎn)擊了按鈕就讓按鈕禁用 （避免正常情況下多次觸發(fā)定時(shí)器事件）
? ? ? color: 'grey',
? ? })
? ? var tel = that.data.tel;
? ? var currentTime = that.data.currentTime
? ? //把手機(jī)號(hào)跟倒計(jì)時(shí)值變例成js值
? ? var warn = null;
? ? //warn為當(dāng)手機(jī)號(hào)為空或格式不正確時(shí)提示用戶的文字，默認(rèn)為空
? ? if (tel == '') {
? ? ? warn = "號(hào)碼不能為空";
? ? }
? ? else if (tel.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(tel)) {
? ? ? warn = "手機(jī)號(hào)格式不正確";
? ? }
? ? else {
? ? ? //當(dāng)手機(jī)號(hào)正確的時(shí)候提示用戶短信驗(yàn)證碼已經(jīng)發(fā)送
? ? ? wx.showToast({
? ? ? ? title: '短信驗(yàn)證碼已發(fā)送',
? ? ? ? icon: 'none',
? ? ? ? duration: 2000
? ? ? });
? ? ? //設(shè)置一分鐘的倒計(jì)時(shí)
? ? ? var interval = setInterval(function () {
? ? ? ? currentTime--;
? ? ? ? //每執(zhí)行一次讓倒計(jì)時(shí)秒數(shù)減一
? ? ? ? that.setData({
? ? ? ? ? text: currentTime + 's', //按鈕文字變成倒計(jì)時(shí)對(duì)應(yīng)秒數(shù)
? ? ? ? })
? ? ? ? //如果當(dāng)秒數(shù)小于等于0時(shí) 停止計(jì)時(shí)器 且按鈕文字變成重新發(fā)送 且按鈕變成可用狀態(tài) 倒計(jì)時(shí)的秒數(shù)也要恢復(fù)成默認(rèn)秒數(shù) 即讓獲取驗(yàn)證碼的按鈕恢復(fù)到初始化狀態(tài)只改變按鈕文字
? ? ? ? if (currentTime <= 0) {
? ? ? ? ? clearInterval(interval)
? ? ? ? ? that.setData({
? ? ? ? ? ? text: '重新發(fā)送',
? ? ? ? ? ? currentTime: 61,
? ? ? ? ? ? disabled: false,
? ? ? ? ? ? color: 'red'
? ? ? ? ? })
? ? ? ? }
? ? ? }, 1000);
? ? };
? ? //判斷 當(dāng)提示錯(cuò)誤信息文字不為空 即手機(jī)號(hào)輸入有問(wèn)題時(shí)提示用戶錯(cuò)誤信息 并且提示完之后一定要讓按鈕為可用狀態(tài) 因?yàn)辄c(diǎn)擊按鈕時(shí)設(shè)置了只要點(diǎn)擊了按鈕就讓按鈕禁用的情況
? ? if (warn != null) {
? ? ? wx.showModal({
? ? ? ? title: '提示',
? ? ? ? content: warn
? ? ? })
? ? ? that.setData({
? ? ? ? disabled: false,
? ? ? ? color: 'red'
? ? ? })
? ? ? return;
? ? };
? },
?
})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息
- 微信小程序項(xiàng)目實(shí)踐之驗(yàn)證碼倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 小程序?qū)崿F(xiàn)簡(jiǎn)單驗(yàn)證碼倒計(jì)時(shí)
相關(guān)文章
本文通過(guò)實(shí)例代碼給大家分享了JavaScript貪吃蛇小組件功能 ,需要的朋友可以參考下2017-08-08
js將類(lèi)數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
javascript與dom有許多瑕疵，如著名的類(lèi)數(shù)組對(duì)象Arguments，其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類(lèi)，那多省時(shí)啊。2010-05-05
javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
html5為表單元素(type為text/password/search/url/telephone/email)新增了一個(gè)placeholder屬性，為輸入框提供一種提示2012-01-01
JS實(shí)現(xiàn)音樂(lè)導(dǎo)航特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)音樂(lè)導(dǎo)航特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript字符串檢索字符的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript類(lèi)型系統(tǒng)_正則表達(dá)式RegExp類(lèi)型詳解
下面小編就為大家?guī)?lái)一篇javascript類(lèi)型系統(tǒng)_正則表達(dá)式RegExp類(lèi)型詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JavaScript關(guān)閉當(dāng)前頁(yè)面(窗口)不帶任何提示
這篇文章主要介紹了JavaScript關(guān)閉當(dāng)前頁(yè)面(窗口)不帶任何提示的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
正則表達(dá)式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過(guò)實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求
這篇文章主要介紹了深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法，需要的朋友可以參考一下2013-06-06