快捷導(dǎo)航

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

更新時(shí)間：2022年05月24日 09:02:29 作者：小丫么小菜菜

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

wxml代碼：

<view class='container'>
? <form bindsubmit='denglu'>
? ? <view class='list'>
? ? ? <view class='left'>
? ? ? ? <label>手機(jī)號(hào):</label>
? ? ? ? <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='請(qǐng)輸入手機(jī)號(hào)'></input>
? ? ? </view>
? ? ? <view class='right'></view>
? ? </view>
? ? <view class='list border'>
? ? ? <view class='left'>
? ? ? ? <label>驗(yàn)證碼:</label>
? ? ? ? <input type='number' name="code" placeholder='請(qǐng)輸入驗(yàn)證碼'></input>
? ? ? </view>
? ? ? <view class='right'>
? ? ? ? <button class='send' wx:if="{{isShow}}" catchtap='send'>發(fā)送驗(yàn)證碼</button>
? ? ? ? <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒后重新發(fā)送</button>
? ? ? </view>
? ? </view>
? ? <button form-type='submit' class='btn'>登錄</button>
? </form>
</view>

js代碼：

const app = getApp()
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? countdown: 60,
? ? isShow:true
? },
? //倒計(jì)時(shí)
? count:function(that){
? ? var interval = setInterval(function () {
? ? ? var countdown = that.data.countdown;
? ? ? if (countdown == 0) {
? ? ? ? that.setData({
? ? ? ? ? isShow: true,
? ? ? ? ? countdown: 60
? ? ? ? })
? ? ? ? clearInterval(interval)
? ? ? } else {
? ? ? ? countdown--;
? ? ? ? that.setData({
? ? ? ? ? isShow: false,
? ? ? ? ? countdown: countdown
? ? ? ? })
? ? ? }
? ? }, 1000)
? },
? //設(shè)置手機(jī)號(hào)
? shj: function (e) {
? ? this.setData({
? ? ? tel: e.detail.value
? ? })
? },
? //獲取驗(yàn)證碼
? send: function () {
? ? var that=this;
? ? wx.showToast({
? ? ? title: '驗(yàn)證碼發(fā)送成功',
? ? ? icon: 'none',
? ? ? duration: 1000,
? ? ? success: function () {
? ? ? ? that.count(that)
? ? ? }
? ? })
? },?
? //登錄
? denglu:function(e){
? ? ?console.log(e.detail.value)
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ??
? },
?
})

wxss代碼：

.list{
? background-color: white;
? font-size: 32rpx;
? padding: 20rpx 30rpx;
? display: flex;
? justify-content: space-between;
? align-content: center;
? align-items: center
}
.border{
? border-top: 1rpx solid #f4f4f4
}
.left{
? display: flex;
? align-content: center;
? align-items: center
}
.left>label{
? width: 140rpx
}
.left>input{
? font-size: 30rpx
}
.right{
? width:240rpx;
? text-align: right;
? color: #ff9900;
? font-size: 30rpx
}
.send{
? background-color: #3296fa;
? color: white;
? line-height: 60rpx;
? font-size: 30rpx;
? border-radius: 0;
? padding-left: 0;
? padding-right: 0
}
.btn{
? background-color: #3296fa;
? color: white;
? line-height: 90rpx;
? font-size: 32rpx;
? border-radius: 0;
? margin-top: 100rpx;
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: