uni-app實現(xiàn)獲取驗證碼倒計時功能
更新時間：2020年11月01日 13:15:30 作者：Laladoge
這篇文章主要為大家詳細(xì)介紹了uni-app實現(xiàn)獲取驗證碼倒計時功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了uni-app實現(xiàn)獲取驗證碼倒計時的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)的效果
頁面部分是一個三目運算，codeTime是倒計時的時間。
<template>
<view>
<view class="three">
<view class="get" @tap="getCheckNum()">
<text>{{!codeTime?'獲取驗證碼':codeTime+'s'}}</text>
</view>
<view class="all">
<view class="left">驗證碼</view>
<input v-model="mydata.checkNum" placeholder="請輸入驗證碼"/>
</view>
<button class="btn" @tap='sure'>確認(rèn)</button>
</view>
</view>
</template>
具體思路：
三目運算，判斷codeTime的值，當(dāng)為0的時候顯示文字“獲取驗證碼”，大于0的時候顯示驗證碼的倒計時。codeTime默認(rèn)為0.
這里有個問題就是，怎么阻止用戶在倒計時還沒結(jié)束的時候一直點擊，影響倒計時。
解決辦法是寫個判斷，當(dāng)codeTime大于60的時候，彈窗提示用戶不能重復(fù)獲取驗證碼。當(dāng)?shù)褂嫊r運行完了之后要清除倒計時。
代碼：
<script>
export default {
data() {
return {
codeTime:0,
}
},
methods: {
getCheckNum(){
if(this.codeTime>0){
uni.showToast({
title: '不能重復(fù)獲取',
icon:"none"
});
return;
}else{
this.codeTime = 60
let timer = setInterval(()=>{
this.codeTime--;
if(this.codeTime<1){
clearInterval(timer);
this.codeTime = 0
}
},1000)
}
}
}
}
css樣式：
.all{
margin: 30rpx;
border-bottom: 2rpx solid #EEEEEE;
display: flex;
flex-wrap: nowrap;
}
.left{
margin-bottom: 30rpx;
margin-right: 40rpx;
width: 150rpx;
}
.three{
background-color: white;
width: 92%;
border-radius: 10rpx;
padding: 20rpx 0;
margin: 20rpx auto;
position: relative;
}
.btn{
background-color: orange;
font-size: 28rpx;
width: 160rpx;
height: 70rpx;
line-height: 70rpx;
margin-top: 40rpx;
color: white;
font-weight: 600;
}
.get{
position: absolute;
top: 40rpx;
right: 30rpx;
background-color: orange;
height: 70rpx;
line-height: 70rpx;
color: white;
border-radius: 10rpx;
padding: 0 20rpx;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中常用的五種數(shù)字千分位格式化方法
數(shù)字格式化是開發(fā)中經(jīng)常遇到的任務(wù),特別是在需要為數(shù)字添加千分位符或控制小數(shù)位數(shù)時,以下是幾種常用的數(shù)字格式化方法,每種方法有其優(yōu)缺點,適用于不同的需求場景,感興趣的小伙伴跟著小編一起來看看吧2024-12-12
對于一些電商平臺來說，當(dāng)商品被轉(zhuǎn)發(fā)后會很影響客戶查看其它產(chǎn)品和首頁，這時候就需要使用自定義導(dǎo)航欄自己寫一個“膠囊按鈕”。這篇文章主要介紹了詳見微信小程序膠囊按鈕返回|首頁自定義導(dǎo)航欄,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了fetch跨域問題的使用詳解,fetch 的核心主要包括：Request , Response , Header , Body，利用了請求的異步特性 --- 它是基于 promise 的，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
JavaScript實現(xiàn)url地址自動檢測并添加URL鏈接示例代碼
寫一個簡單的聊天系統(tǒng)，發(fā)出Htpp的Url實現(xiàn)跳轉(zhuǎn)加上a標(biāo)簽，下面是具體的實現(xiàn)，感興趣的朋友不要錯過2013-11-11
終于解決了IE8不支持?jǐn)?shù)組的indexOf方法
今天，測試報過來一個js bug, 在IE8下有個js錯誤，但是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。后來調(diào)試發(fā)現(xiàn)原因是在IE8下，js數(shù)組沒有indexOf方法。2013-04-04
微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換
本文主要介紹了微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
JavaScript中的閉包(Closure)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的閉包(Closure)詳細(xì)介紹,函數(shù)調(diào)用對象與變量的作用域鏈、什么是閉包等內(nèi)容,并給出了實例,需要的朋友可以參考下2014-12-12
用了一年時間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
判斷字符串的長度的方法有很多，本例介紹的是優(yōu)化之前的方法，記住中文占兩個字符，需要的朋友不要錯過2014-10-10
Javascript設(shè)計模式之發(fā)布訂閱模式
發(fā)布---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關(guān)系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，當(dāng)一個對象發(fā)生改變時，所有依賴于它的對象都將得到通知2022-12-12