全栈工程师?
嗯.....目前并不是!

Axure 8.0實例:隨機短信驗證碼

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

預覽:

Axure 8.0實例 | 隨機短信驗證碼

一、元件準備

(1)添加全局變量三個,分別取名為“yzmcl”、“yzm”、“djs”。“yzmcl”設置默認值為“0123456789”,用於隨機驗證碼取值範圍;“yzm”設置默認值為空,用於存儲隨機生成的驗證碼;“djs”設置默認值為空,用於可再次發起獲取驗證碼的時間間隔。

Axure 8.0實例 | 隨機短信驗證碼

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

(3)添加動態面板兩個,分別取名為“驗證碼提示信息”和“驗證碼倒計時”。“驗證碼提示信息”中放置一個矩形框“短信內容”用於展示短信信息,隱藏動態面板備用。

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

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

(4)將“驗證碼倒計時”動態面板與“獲取驗證碼”矩形框重合放置,並將“獲取驗證碼”矩形框設置為置頂。

二、添加用例

(1)給當前頁面設置載入用例

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

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

如果小於6則從“yzmcl”中隨機獲取一個數字,並將獲取的數字併入“yzm”。

Axure 8.0實例 | 隨機短信驗證碼

說明:

  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位隨機的數字驗證碼。

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

②設置“驗證碼倒計時”面板循環改變,每隔1s,即1000ms改變一次。

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

(3)給“獲取驗證碼”添加用例

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

③觸發“驗證碼倒計時”面板循環,每隔1s,即1000ms循環一次。

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

⑤設置“yzm”的值為空。

Axure 8.0實例 | 隨機短信驗證碼

⑥觸發頁面載入時用例。

Axure 8.0實例 | 隨機短信驗證碼

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

Axure 8.0實例 | 隨機短信驗證碼

⑧顯示“驗證碼提示信息”動態面板。

Axure 8.0實例 | 隨機短信驗證碼

 

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

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure 8.0實例:隨機短信驗證碼》
文章链接:https://www.pmbear.com/archives/9491
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们