本文給大家講解的是，如何用Axure製作隨機短信驗證碼，enjoy~
預覽：
一、元件準備
（1）添加全局變量三個，分別取名為“yzmcl”、“yzm”、“djs”。“yzmcl”設置默認值為“0123456789”，用於隨機驗證碼取值範圍；“yzm”設置默認值為空，用於存儲隨機生成的驗證碼；“djs”設置默認值為空，用於可再次發起獲取驗證碼的時間間隔。
（2）添加一個矩形框，命名和文字信息為“獲取驗證碼”。
（3）添加動態面板兩個，分別取名為“驗證碼提示信息”和“驗證碼倒計時”。“驗證碼提示信息”中放置一個矩形框“短信內容”用於展示短信信息，隱藏動態面板備用。
“驗證碼倒計時”有兩個state，state1中放置兩個矩形框，其中一個矩形框命名為“倒計時1”；另外一個矩形框文字信息為“s重新獲取”，且保持該矩形框形狀大小與“獲取驗證碼”矩形框一致。
state2放置內容同state1，其中一個矩形命名為“倒計時2”。
（4）將“驗證碼倒計時”動態面板與“獲取驗證碼”矩形框重合放置，並將“獲取驗證碼”矩形框設置為置頂。
二、添加用例
（1）給當前頁面設置載入用例
目前短信驗證碼的位數一般為4位或者6位隨機數字，本文以6位為例。
①在頁面載入時，判斷全局變量“yzm”的位數是否小於6。
如果小於6則從“yzmcl”中隨機獲取一個數字，並將獲取的數字併入“yzm”。
說明：
- substr(start,length)為字符串截取函數，start為截取的開始位置的下標，從0開始；length為截取的長度；
- Math.floor為向下取整函數；
- Math.random為隨機函數，隨機生成一個0~1之間的數。
[[yzmcl.substr(Math.floor(Math.random()*10),1)]]的含義：
- 使用Math.random函數隨機生成一個0~1之間的數值；
- 將該數值擴大10倍，即可獲取一個0~10之間的數值；
- 使用Math.floor函數向下取整，即可獲取一個0~9(包含0和9)的整數；
- 使用substr函數從“yzmcl”中截取第三步中獲取的整數的下標對應的數字；
- 然後觸發頁面的“頁面載入時”的用例，繼續判斷“yzm”的位數是否小於6，直到“yzm”的位數等6時退出當前循環，此時便已經生成了一次6位隨機的數字驗證碼。
（2）給“驗證碼倒計時”動態面板添加狀態改變時用例。
判斷“djs”的文字內容是否大於0。
①如果“djs”的文字內容大於0，則將“djs”的文字內容減去1。
②設置“驗證碼倒計時”面板循環改變，每隔1s，即1000ms改變一次。
③設置“驗證碼倒計時”動態面板中的“倒計時1”和“倒計時2”的文字信息為“djs”的文字內容。
“djs”的文字內容小於等於0時，直接顯示並置頂“獲取驗證碼”矩形框。
（3）給“獲取驗證碼”添加用例
①點擊“獲取驗證碼”按鈕時，首先給“djs”變量賦值為60，即倒計時總長度為60s。
②設置“驗證碼倒計時”動態面板中的“倒計時1”和“倒計時2”的文字信息為“djs”的文字內容。
③觸發“驗證碼倒計時”面板循環，每隔1s，即1000ms循環一次。
④顯示並置頂“驗證碼倒計時”。
⑤設置“yzm”的值為空。
⑥觸發頁面載入時用例。
⑦設置“驗證碼提示信息”面板中的“短信內容”矩形框文字信息。
⑧顯示“驗證碼提示信息”動態面板。
題圖來自 Pexels，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
