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

預覽：

一、元件準備

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

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

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

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

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

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

二、添加用例

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

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

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

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

說明：

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

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

1. 使用Math.random()函數(shù)隨機生成一個0~1之間的數(shù)值；
2. 將該數(shù)值擴大10倍，即可獲取一個0~10之間的數(shù)值；
3. 使用Math.floor()函數(shù)向下取整，即可獲取一個0~9(包含0和9)的整數(shù)；
4. 使用substr()函數(shù)從“yzmcl”中截取第三步中獲取的整數(shù)的下標對應的數(shù)字；
5. 然后觸發(fā)頁面的“頁面載入時”的用例，繼續(xù)判斷“yzm”的位數(shù)是否小于6，直到“yzm”的位數(shù)等6時退出當前循環(huán)，此時便已經(jīng)生成了一次6位隨機的數(shù)字驗證碼。

（2）給“驗證碼倒計時”動態(tài)面板添加狀態(tài)改變時用例。

判斷“djs”的文字內容是否大于0。

①如果“djs”的文字內容大于0，則將“djs”的文字內容減去1。

②設置“驗證碼倒計時”面板循環(huán)改變，每隔1s，即1000ms改變一次。

③設置“驗證碼倒計時”動態(tài)面板中的“倒計時1”和“倒計時2”的文字信息為“djs”的文字內容。

“djs”的文字內容小于等于0時，直接顯示并置頂“獲取驗證碼”矩形框。

（3）給“獲取驗證碼”添加用例

①點擊“獲取驗證碼”按鈕時，首先給“djs”變量賦值為60，即倒計時總長度為60s。

②設置“驗證碼倒計時”動態(tài)面板中的“倒計時1”和“倒計時2”的文字信息為“djs”的文字內容。

③觸發(fā)“驗證碼倒計時”面板循環(huán)，每隔1s，即1000ms循環(huán)一次。

④顯示并置頂“驗證碼倒計時”。

⑤設置“yzm”的值為空。

⑥觸發(fā)頁面載入時用例。

⑦設置“驗證碼提示信息”面板中的“短信內容”矩形框文字信息。

⑧顯示“驗證碼提示信息”動態(tài)面板。

作者：無淚，個人公眾號：楊小貝，一起探討原型設計

本文由 @無淚 原創(chuàng)發(fā)布于人人都是產品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協(xié)議