本文給大家講解的是，如何用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”。

說明：

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 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部