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