您好,登錄后才能下訂單哦!
前言
要做一個app的話,肯定會涉及到這個功能,所以就從網(wǎng)上找了許多前輩的資料,找到了一個最適合自己并且方便理解的實現(xiàn)此功能,寫此日記方便未來自己復(fù)習(xí)和其他人學(xué)習(xí)
思路
在用戶注冊的時候,時下不少app都選擇了綁定手機號注冊,這是一個非常好的想法,便捷用戶操作,也很方便遵循實名制的問題,在設(shè)計按鈕的時候,需要讓他顯示在輸入驗證碼的旁邊,并在用戶點擊后,開始倒計時,并將按鈕變成無法點擊效果
點擊前
點擊后
在本篇日記中只涉及到1個page下的文件,包括html、ts和scss(我的頁面名為reg,可根據(jù)自己的具體情況進行調(diào)整)
在reg.ts定義在html中可以獲取到的信息
//驗證碼倒計時 verifyCode: any = { verifyCodeTips: "獲取驗證碼", countdown: 60, disable: true }
reg.html設(shè)計布局
上面的圖片是我自己設(shè)計的,這里只取關(guān)鍵代碼
點擊事件getCode(),設(shè)置[disabled]是否可以點擊按鈕,用boolean值判斷,主要顯示的內(nèi)容是verifyCode.verifyCodeTips,即文本信息和之后需要實現(xiàn)的倒計時
reg.ts添加方法和倒計時處理
當點擊button后將觸發(fā)getCode()方法,觸發(fā)該方法后首先將disable的值改變?yōu)閒alse,將按鈕設(shè)為不可點擊,然后觸發(fā)settime方法
getCode() { //點擊按鈕后開始倒計時 this.verifyCode.disable = false; this.settime(); }
settime()具體實現(xiàn)倒計時功能
//倒計時 settime() { if (this.verifyCode.countdown == 1) { this.verifyCode.countdown = 60; this.verifyCode.verifyCodeTips = "獲取驗證碼"; this.verifyCode.disable = true; return; } else { this.verifyCode.countdown--; } this.verifyCode.verifyCodeTips = "重新獲取"+this.verifyCode.countdown+"秒"; setTimeout(() => { this.verifyCode.verifyCodeTips = "重新獲取"+this.verifyCode.countdown+"秒"; this.settime(); }, 1000); }
用每過1秒計數(shù)器減1,簡單的倒計時功能,重要的是判斷計數(shù)器是否為1,當為1后就將verifyCode的3個信息重新初始化
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。