微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
本文實(shí)例為大家分享了微信小程序驗(yàn)證碼倒計(jì)時(shí)效果的具體代碼,供大家參考,具體內(nèi)容如下
如果寫過js的倒計(jì)時(shí),那么小程序中使用也是差不多的;
代碼:
data: { ? ?? ?daojishi:60, ?? ?inter:'' ?? ?}, ? daojishi: function () { ? ? this.data.inter = setInterval((res) => { ? ? ? this.fun(); ? ? }, 1000); ? }, ? fun: function () { ? ? let t = this.data.daojishi; ? ? t--; ? ? this.setData({ ? ? ? daojishi: t ? ? }) ? ? if (t <= 0) { ? ? ? // location.; ? ? ? clearInterval(this.data.inter); ? ? ? this.setData({ ? ? ? ? isyanzhengma: true ? ? ? }) ? ? } ? },
手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼,倒計(jì)時(shí)后重新獲取效果
描述:
輸入正確的手機(jī)號(hào)并且輸入驗(yàn)證碼后,手機(jī)登錄按鈕變?yōu)榧t色可點(diǎn)擊狀態(tài);自動(dòng)驗(yàn)證輸入的手機(jī)號(hào)是否為合法手機(jī)號(hào);點(diǎn)擊獲取動(dòng)態(tài)碼后開始60秒倒計(jì)時(shí)后才可以再次獲取動(dòng)態(tài)碼;
效果圖:
代碼:
html:
<view class="dltel"> ? <view class="teltit">手機(jī)快捷登錄</view> ? <view class="inpbox"> ? ? <input placeholder="請(qǐng)輸入手機(jī)號(hào)" class="inpbtn" type='number' maxlength="11" value="{{mobile}}" bindinput='blurPhone' /> ? ? <text class="dongtaima {{hui?'hui':'red'}}" wx:if="{{isyanzhengma}}" bindtap="dongtaima">獲取動(dòng)態(tài)碼</text> ? ? <text class="dongtaima" wx:else>重發(fā)({{daojishi}})</text> ? </view> ? <view class="inpbox"> ? ? <input placeholder="請(qǐng)輸入驗(yàn)證碼" value="{[code]}" maxlength="6" class="inpbtn" bindinput="codetap" ?/> ? </view> ? <view class="teldl {{dlno ? 'tou50':''}}" bindtap="teldltap"> ? ? <text class="icontxt">手機(jī)登錄</text> ? </view> </view>
js:
// pages/dltel/dltel.js import { ? sendCode, ? mobileLogin } from "../../utils/requst/api.js"; Page({ ? /** ? ?* 頁面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? navbarData: { ? ? ? isfixed: false, ? ? ? iswhite: false, //icon color ? ? ? showCapsule: 1, //是否顯示左上角圖標(biāo) 1表示顯示 0表示不顯示 ? ? ? title: '登錄', //導(dǎo)航欄 中間的標(biāo)題 ? ? ? backgroundcolor: '#fff', ? ? ? isintercept: false //返回?cái)r截 ? ? }, ? ? mobile: '', ? ? code: '', ? ? isyanzhengma: true, ? ? hui: true, ? ? dlno: true, ? ? daojishi: 60, ? ? teltrue: false, ? ? inter: '', ? }, ? // 手機(jī)號(hào)驗(yàn)證 ? blurPhone: function (e) { ? ? this.setData({ ? ? ? mobile: e.detail.value ? ? }) ? ? let phone = this.data.mobile; ? ? if (!(/^1[34578]\d{9}$/.test(phone))) { ? ? ? this.setData({ ? ? ? ? teltrue: false, ? ? ? ? hui: true, ? ? ? }) ? ? ? if (phone.length >= 11) { ? ? ? ? wx.showToast({ ? ? ? ? ? title: '手機(jī)號(hào)有誤', ? ? ? ? ? icon: 'none', ? ? ? ? ? duration: 2000 ? ? ? ? }) ? ? ? } ? ? } else { ? ? ? this.setData({ ? ? ? ? teltrue: true, ? ? ? ? hui: false, ? ? ? }) ? ? ? console.log('驗(yàn)證成功', this.data.teltrue) ? ? } ? }, ? dongtaima: function (e) { ? ? if (this.data.teltrue & !this.data.hui) { ? ? ? let params = { ? ? ? ? mobile: this.data.mobile ? ? ? } ? ? ? sendCode(params).then((res) => { ? ? ? ? console.log(res); ? ? ? ? if (res.data.msg == '發(fā)送成功!') { ? ? ? ? ? wx.showToast({ ? ? ? ? ? ? title: res.data.msg, ? ? ? ? ? ? icon: "none", ? ? ? ? ? ? duration: 2000 ? ? ? ? ? }) ? ? ? ? ? this.setData({ ? ? ? ? ? ? isyanzhengma: false ? ? ? ? ? }) ? ? ? ? ? this.daojishi(); ? ? ? ? } else { ? ? ? ? ? wx.showToast({ ? ? ? ? ? ? title: "發(fā)送失敗,請(qǐng)重發(fā)!", ? ? ? ? ? ? icon: "none", ? ? ? ? ? ? duration: 2000 ? ? ? ? ? }) ? ? ? ? } ? ? ? }) ? ? } else if (!this.data.teltrue) { ? ? ? wx.showToast({ ? ? ? ? title: "請(qǐng)?zhí)顚懻_的手機(jī)號(hào)!", ? ? ? ? icon: "none", ? ? ? ? duration: 2000 ? ? ? }) ? ? } ? }, ? codetap: function (e) { ? ? // console.log(e); ? ? this.setData({ ? ? ? code: e.detail.value ? ? }) ? ? if (this.data.teltrue & this.data.code != '') { ? ? ? this.setData({ ? ? ? ? dlno: false ? ? ? }) ? ? } ? }, ? daojishi: function () { ? ? this.data.inter = setInterval((res) => { ? ? ? this.fun(); ? ? }, 1000); ? }, ? fun: function () { ? ? let t = this.data.daojishi; ? ? t--; ? ? this.setData({ ? ? ? daojishi: t ? ? }) ? ? if (t <= 0) { ? ? ? // location.; ? ? ? clearInterval(this.data.inter); ? ? ? this.setData({ ? ? ? ? isyanzhengma: true ? ? ? }) ? ? } ? }, ? teldltap: function () { ? ? let params = { ? ? ? code: this.data.code, ? ? ? mobile: this.data.mobile ? ? } ? ? if (this.data.teltrue & this.data.code != '') { ? ? ? mobileLogin(params).then((res) => { ? ? ? ? // console.log(params); ? ? ? ? // console.log(res); ? ? ? ? if (res.data.message == "ok") { //登錄成功 修改參數(shù) ? ? ? ? ? //getApp().globalData.token = res.data.data.token; ? ? ? ? ? //getApp().globalData.type = res.data.data.type; ? ? ? ? ? //getApp().globalData.telnum = res.data.data.mobile; ? ? ? ? ? //wx.setStorageSync('token', res.data.data.token); ? ? ? ? ? //wx.setStorageSync('type', res.data.data.type); ? ? ? ? ? //wx.setStorageSync('telnum', res.data.data.mobile); ? ? ? ? ? //let pages = getCurrentPages(); // 當(dāng)前頁的數(shù)據(jù), ? ? ? ? ? //let prevPage = pages[pages.length - 3]; // 上上頁的數(shù)據(jù) ? ? ? ? ? //console.log(pages); ? ? ? ? ? //prevPage.setData({ ? ? ? ? ? ? //token: res.data.data.token, ? ? ? ? ? ? //type: res.data.data.type, ? ? ? ? ? ? //telnum: res.data.data.mobile ? ? ? ? ? //}) ? ? ? ? ? //wx.navigateBack({ ? ? ? ? ? ? //delta: 2 ? ? ? ? ? //}) ? ? ? ? } else { ? ? ? ? ? wx.showToast({ ? ? ? ? ? ? title: res.data.msg, // 未成功原因 ? ? ? ? ? ? icon: "none", ? ? ? ? ? ? duration: 2000 ? ? ? ? ? }) ? ? ? ? } ? ? ? }) ? ? } else if (!this.data.teltrue) { ? ? ? wx.showToast({ ? ? ? ? title: "請(qǐng)?zhí)顚懻_的手機(jī)號(hào)!", ? ? ? ? icon: "none", ? ? ? ? duration: 2000 ? ? ? }) ? ? } else { ? ? ? wx.showToast({ ? ? ? ? title: "請(qǐng)?zhí)顚戲?yàn)證碼!", ? ? ? ? icon: "none", ? ? ? ? duration: 2000 ? ? ? }) ? ? } ? }, ?? })
css:(less)
@fontcolor:#353535; @red:#ff2b0a; .dltel{? ? position: relative; ? width: 100%; ? height: 100vh; ? padding:0 40rpx; ? box-sizing: border-box; ? .teltit{ ? ? font-size: 50rpx; ? ? color: @fontcolor; ? ? line-height: 90rpx; ? ? margin-top: 35rpx; ? ? margin-left: 20rpx; ? } ? .inpbox{ ? ? position: relative; ? ? width: 100%; ? ? height: 100rpx; ? ? line-height: 100rpx; ? ? font-size: 28rpx; ? ? color: @fontcolor; ? ? display: flex; ? ? flex-direction: row; ? ? border-bottom: 1px solid #eee; ? ? .dongtaima{ ? ? ?? ? ? } ? ? .inpbtn{ ? ? ? width: 430rpx; ? ? ? height: 100%; ? ? ? margin:0 30rpx; ? ? } ? ? .hui{ ? ? ? color: #888 ? ? } ? ? .red{ ? ? ? color: @red; ? ? } ? } ? .teldl{ ? ? position: relative; ? ? width: 100%; ? ? height: 94rpx; ? ? border-radius: 15rpx; ? ? line-height: 94rpx; ? ? text-align: center; ? ? font-size: 36rpx; ? ? margin-top:60rpx; ? ? color: #fff; ? ? background: @red; ? } ? .tou50{ ? ? background:#ff9584; ? } }
以上就是本文的全部?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)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
- 微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序的注冊(cè)頁面包含倒計(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)文章
獲取客戶端網(wǎng)卡MAC地址和IP地址實(shí)現(xiàn)JS代碼
獲取客戶端的一些信息,如IP和MAC,以結(jié)合身份驗(yàn)證,相信很多人都會(huì)這樣做吧,我們這里用Javascript,這樣做的好處是不需要服務(wù)器端進(jìn)行處理,有客戶端自行獲取,感興趣的你可以參考下哈2013-03-03UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法記錄
在使用uniapp開發(fā)項(xiàng)目過程中有時(shí)候會(huì)想讓一些組件占有屏幕剩余的高度,下面這篇文章主要給大家介紹了關(guān)于UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法,需要的朋友可以參考下2023-04-04js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法
這篇文章主要介紹了js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法,涉及javascript中split方法及數(shù)組的操作技巧,需要的朋友可以參考下2015-05-05ES6如何將?Set?轉(zhuǎn)化為數(shù)組示例詳解
這篇文章主要為大家介紹了ES6如何將?Set?轉(zhuǎn)化為數(shù)組的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02原生js獲取iframe中dom元素--父子頁面相互獲取對(duì)方dom元素的方法
下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁面相互獲取對(duì)方dom元素的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08document.createElement("A")比較不錯(cuò)的屬性
document.createElement("A")比較不錯(cuò)的屬性...2007-08-08微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法
這篇文章主要介紹了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法,簡(jiǎn)單分析了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)情況的原因及相應(yīng)的解決方法,需要的朋友可以參考下2017-12-12JavaScript中call,apply,bind的區(qū)別與實(shí)現(xiàn)
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實(shí)現(xiàn),文章通過圍繞主題思想展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09淺談gulp創(chuàng)建完整的項(xiàng)目流程
本篇文章主要介紹了淺談gulp創(chuàng)建完整的項(xiàng)目流程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12