Ionic學(xué)習(xí)日記實現(xiàn)驗證碼倒計時
前言
要做一個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)鍵代碼
<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>
點擊事件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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇使用selenium抓取淘寶的商品信息實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
jvascript 計算保留小數(shù)點一兩位，有四種不同效果，非常適用于商城類網(wǎng)站,需要的朋友可以參考下2014-04-04
談?wù)勎覍avaScript中typeof和instanceof的深入理解
這次主要說說javascript的類型判斷函數(shù)typeof和判斷構(gòu)造函數(shù)原型instanceof的用法和注意的地方，對本文感興趣的朋友一起看看吧2015-12-12
js獲取對象為null的情況，想必很多的朋友都有遇到過吧，只要是js對字符串的解析跟對數(shù)字串的解析還是不太一樣，這是需要注意的地方2013-11-11
在JavaScript中,異步操作通常通過回調(diào)函數(shù)來處理,但當存在多個嵌套異步調(diào)用時,就會出現(xiàn)“回調(diào)地獄”（Callback Hell）,避免回調(diào)地獄有助于提升代碼可讀性和可維護性,并使錯誤處理更為集中和規(guī)范,本文小編給大家介紹了JavaScript避免回調(diào)地獄的策略,需要的朋友可以參考下2025-03-03
webpack中的filename 和 chunkFilename 的區(qū)別實例解析
filename 指列在 entry 中,打包后輸出的文件的名稱,chunkFilename 指未列在 entry 中,卻又需要被打包出來的文件的名稱,這篇文章主要介紹了webpack中的filename 和 chunkFilename 的區(qū)別實例解析,需要的朋友可以參考下2023-11-11
手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)
這篇文章主要介紹了手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JS實現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動態(tài)遍歷頁面元素及樣式修改的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
在JavaScript中并沒有類的概念，但JavaScript中的確可以實現(xiàn)重載，多態(tài)，繼承。這些實現(xiàn)其實方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來解釋。2010-04-04
這兩天一直在弄ajax，用多了才發(fā)現(xiàn)了ajax?的cache問題，請求了好多次，得到了確是相同的結(jié)果，經(jīng)常我想在請求的同時去做一些其它的事情，我在想javascript里有沒有辦法用多線程，經(jīng)過在網(wǎng)上查找找到了結(jié)果。2008-11-11