注：iVX也有免費直播課《第八期直播課》

一、登錄頁實現

本節需要做的登錄頁如下：

該頁面我們復習可以的值，首先設置整個頁面頁面的垂直和水平對其為居中，隨后一個容器包裹對應的登錄區域，此時我們創建一個頁面命名為登錄注冊頁，并且設置水平和垂直對其為居中：

接著我們創建一個行，命名為登錄框，并且需要設置這個行的寬高為 500*300，水平方向對其為居中：

接著我們創建一個行，命名為標題，在內部創建一個文本，編寫文本內容為登錄，接著設置這個標題的的水平分享垂直居中，高度為包裹，并且還可以設置一定的內邊距：

接著再創建一個行命名為手機號驗證，這個框用于存放手機號以及按鈕，此時也需要設置這個框的水平方向的對齊為居中、高度為包裹：

接著在這個行內創建兩個元素，一個是輸入框一個是按鈕：

需要設置成以上形式，需要去掉對應元素的外邊框屬性，比清切使其統一高度，在此設置了兩個元素的高度均為40、圓角取消：


接著按照此方法一次創建其他內容：

此時由于其內部的每一個行的水平內容都是設置為居中，我們需要內部元素的寬度一致才能對其，在此驗證碼輸入框的寬度要等于手機號碼和發送按鈕寬度的綜合。

二、倒計時實現

接著我們需要實現發送驗證碼的倒計時效果。

該效果需要點擊發送按鈕后，發送按鈕出現發送驗證碼的倒計時，此時我們可以分析倒計時的邏輯，是定時的給某個值減1，那么定時執行任務那我們就需要使用一個觸發器，在此我們創建一個定時器命名為登錄驗證碼倒計時觸發器：

接著我們再創建一個變量命名為登錄倒計時，用于存儲倒計時的秒數，并且給予默認值為60：

隨后 我們給予發送按鈕創建一個事件，這個事件用于觸發倒計時任務的觸發器：

觸發完畢后，在觸發器中給予事件，觸發后用于存儲倒計時秒數的變量減1：

那么接下來如何使文本內容更改為描述呢？
、
此時只需要設置對應發送按鈕的文本值即可：

接下來再設置觸發器的觸發時間間隔為 1s 即可：

此時預覽我們可以發現倒計時已經實現：

此時我們等到倒計時到0，發現倒計時內容還會繼續往下減，那如何進行限制？

此時只需要在觸發器中，添加條件，當秒數已經小于1時，那么發送按鈕的文本就更改為發送：

但是此時還會出現一個問題，當前觸發器還未停止，登錄倒計時依舊在減1，此時還需要在小于0時停止當前觸發器并且我還需要給予原本的秒數為60即可：

四、觸發限制

此時我們還需要完成一個限制，就是在點擊發送按鈕時其實一直在觸發觸發器，此時還需要添加一個條件，當倒計時描述為60時才可以觸發當前的發送按鈕事件：

否則在調用發送按鈕的時候就會一直響應發送短信的服務，這樣是不好的。