本文給大家講解的是，如何用Axure制作隨機短信驗證碼，enjoy~

預覽：

一、元件準備

（1）添加全局變量三個，分別取名為“yzmcl”、“yzm”、“djs”?！皔zmcl”設置默認值為“0123456789”，用于隨機驗證碼取值范圍；“yzm”設置默認值為空，用于存儲隨機生成的驗證碼；“djs”設置默認值為空，用于可再次發起獲取驗證碼的時間間隔。

（2）添加一個矩形框，命名和文字信息為“獲取驗證碼”。

（3）添加動態面板兩個，分別取名為“驗證碼提示信息”和“驗證碼倒計時”?！膀炞C碼提示信息”中放置一個矩形框“短信內容”用于展示短信信息，隱藏動態面板備用。

“驗證碼倒計時”有兩個state，state1中放置兩個矩形框，其中一個矩形框命名為“倒計時1”；另外一個矩形框文字信息為“s重新獲取”，且保持該矩形框形狀大小與“獲取驗證碼”矩形框一致。

state2放置內容同state1，其中一個矩形命名為“倒計時2”。

（4）將“驗證碼倒計時”動態面板與“獲取驗證碼”矩形框重合放置，并將“獲取驗證碼”矩形框設置為置頂。

二、添加用例

（1）給當前頁面設置載入用例

目前短信驗證碼的位數一般為4位或者6位隨機數字，本文以6位為例。

①在頁面載入時，判斷全局變量“yzm”的位數是否小于6。

如果小于6則從“yzmcl”中隨機獲取一個數字，并將獲取的數字并入“yzm”。

說明：

1. substr(start,length)為字符串截取函數，start為截取的開始位置的下標，從0開始；length為截取的長度；
2. Math.floor()為向下取整函數；
3. Math.random()為隨機函數，隨機生成一個0~1之間的數。

[[yzmcl.substr(Math.floor(Math.random()*10),1)]]的含義：

1. 使用Math.random()函數隨機生成一個0~1之間的數值；
2. 將該數值擴大10倍，即可獲取一個0~10之間的數值；
3. 使用Math.floor()函數向下取整，即可獲取一個0~9(包含0和9)的整數；
4. 使用substr()函數從“yzmcl”中截取第三步中獲取的整數的下標對應的數字；
5. 然后觸發頁面的“頁面載入時”的用例，繼續判斷“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 協議