在用戶註冊的時候,時下不少app都選擇了綁定手機號碼註冊,這是一個非常好的想法,便捷用戶操作,也很方便遵循實名制的問題,在設計按鈕的時候,需要讓他顯示在輸入驗證碼的旁邊,並在使用者點擊後,開始倒數計時,並將按鈕變成無法點擊效果。本文主要和大家介紹了Ionic學習日記實現驗證碼倒數計時,希望能幫助大家。
在本日記中只涉及1個page下的文件,包括html、ts和scss(我的頁面名為reg,可依自己的具體情況進行調整)
#在reg.ts定義在html中可以取得到的資訊
//验证码倒计时 verifyCode: any = { verifyCodeTips: "获取验证码", countdown: 60, disable: true }
#reg.html設計佈局
上面的圖片是我自己設計的,這裡只取關鍵程式碼
複製程式碼 程式碼如下:
89c100c89483d2f0c8d9d3adbd28c75c{{verifyCode.verifyCodeTips}}65281c5ac262bf6d81768915a4a77ac0
點擊事件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個資訊重新初始化 ##使用Angular.js取得驗證碼倒數計時60秒按鈕方法手機註冊時發送驗證碼倒數功能
以上是Ionic實作驗證碼倒數實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!