微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果

更新時(shí)間：2022年05月24日 10:03:53 作者：幽幽靖

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果，手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼，倒計(jì)時(shí)后重新獲取效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序驗(yàn)證碼倒計(jì)時(shí)效果的具體代碼，供大家參考，具體內(nèi)容如下

如果寫(xiě)過(guò)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)碼后開(kā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({

? /**
? ?* 頁(yè)面的初始數(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í)顚?xiě)正確的手機(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)前頁(yè)的數(shù)據(jù)，
? ? ? ? ? //let prevPage = pages[pages.length - 3]; // 上上頁(yè)的數(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í)顚?xiě)正確的手機(jī)號(hào)！",
? ? ? ? icon: "none",
? ? ? ? duration: 2000
? ? ? })
? ? } else {
? ? ? wx.showToast({
? ? ? ? title: "請(qǐng)?zhí)顚?xiě)驗(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: