本文分析了Axure原型的三個(gè)層次：表示層，邏輯層和表示層。今天的文章從這個(gè)層次的想法開始，并繼續(xù)分享驗(yàn)證碼的原型設(shè)計(jì)。

上次我分享了這個(gè)主題的開頭，我談到了Axure原型的三個(gè)層次，即表示層，邏輯層和表示層。并舉一個(gè)簡單的例子：音量調(diào)整。

這一次將共享一個(gè)更常見的組件：驗(yàn)證碼。如下圖所示

驗(yàn)證碼

首先，在實(shí)際工作中，沒有必要像這樣做這樣的高保真驗(yàn)證碼，這是浪費(fèi)精力。要做這些例子，主要是為了鍛煉自己的邏輯和熟悉Axure。當(dāng)然，您可以將其保存在自己的組件庫中，并在需要時(shí)使用它。挺酷的。

不要多說，直接去主題。

分析如下：

績效層

4個(gè)自由角度隨機(jī)字符

輸入框

驗(yàn)證按鈕

邏輯層

如果我點(diǎn)擊驗(yàn)證碼圖像，則圖片上的字符會隨機(jī)更改。具體的變化規(guī)則是：生成4個(gè)隨機(jī)字符，旋轉(zhuǎn)隨機(jī)角度，背景隨機(jī)變化

如果我輸入輸入框中的字符和驗(yàn)證碼上方的圖片，則驗(yàn)證通過

關(guān)鍵是生成四個(gè)隨機(jī)字符，隨機(jī)旋轉(zhuǎn)角度和隨機(jī)背景。

數(shù)據(jù)層

我們可以簡單地假設(shè)該字符來自26個(gè)大寫和小寫字母以及10個(gè)數(shù)字的集合，即

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

在這里分析，我們的想法是：

構(gòu)造隨機(jī)字符集，然后使用隨機(jī)函數(shù)從集合中隨機(jī)取四個(gè)數(shù)字以形成驗(yàn)證碼。

使用隨機(jī)數(shù)的Axure旋轉(zhuǎn)事件來實(shí)現(xiàn)字符隨機(jī)旋轉(zhuǎn)的效果。

至于背景圖像，術(shù)語稱為噪聲圖。在百度上查找圖片，然后使用動態(tài)面板限制顯示區(qū)域的效果，并使用隨機(jī)移動來實(shí)現(xiàn)更改背景的效果。

噪音地圖

輸入實(shí)際操作

畫框

拖動輸入框，動態(tài)面板和按鈕以調(diào)整到適當(dāng)?shù)拇笮　?

雙擊進(jìn)入動態(tài)面板并將噪聲貼圖放入其中。

這實(shí)現(xiàn)了噪聲圖的部分顯示：

然后我們在動態(tài)面板的onclick上添加一個(gè)move事件：

功能是：

[[的Math.random（）toFixed（2）* - 100]]

原理說明：

Math.random（）生成0-1隨機(jī)數(shù)，toFixed（2）保留2個(gè)小數(shù)位，并乘以-100，因?yàn)锳xure軸的原點(diǎn)位于左上角，圖像移動到負(fù)數(shù)。這會將噪點(diǎn)圖片隨機(jī)移動1-100點(diǎn)。

驗(yàn)證碼生成

邏輯層與數(shù)據(jù)層直接一起寫入。

您可以使用設(shè)置變量的形式，但這涉及其他知識，因此我們使用一種棘手的方式在標(biāo)記中存儲字符集。

在驗(yàn)證碼背景上拖動四個(gè)標(biāo)簽（放在動態(tài)面板中）以表示4個(gè)隨機(jī)字符。然后拖動下面的標(biāo)簽將其存儲為字符串集合。圖：

候選字符總共有26 + 26 + 10=62個(gè)字符

我們需要使用以下公式從這62個(gè)字符中隨機(jī)選擇。

[[LVAR1.charAt（（的Math.random（）* 62）.toFixed（0））]]

LVAR1指向一組字符。 charAt（）函數(shù)返回字符串中指定位置的字符。 Math.random（）返回0-1隨機(jī)數(shù)，乘以62成為生成1-62的隨機(jī)數(shù)，而toFixed（0）函數(shù)將結(jié)果保留為零位數(shù)分?jǐn)?shù)，即舍入。

四個(gè)隨機(jī)字符都是相同的功能。在動態(tài)面板的onclick中添加。

此時(shí)，已經(jīng)可以通過單擊驗(yàn)證碼隨機(jī)生成4個(gè)字符。為了實(shí)事求是，讓我們添加一個(gè)隨機(jī)旋轉(zhuǎn)函數(shù)。

很簡單，設(shè)置一個(gè)旋轉(zhuǎn)角度為1-60的隨機(jī)數(shù)。公式是

[[的Math.random（）* 60]]

好的，最后將字符集標(biāo)簽設(shè)置為隱藏，最終效果出來了。

預(yù)覽.gif

隨后，可以將動態(tài)面板的onclick事件粘貼到頁面的onload事件中，以便在加載時(shí)加載隨機(jī)字符。

如果要驗(yàn)證，只需編寫一個(gè)函數(shù)，拼接4個(gè)隨機(jī)字符，并判斷它是否等于文本框輸入。這不是討論的范圍。本文僅演示驗(yàn)證碼高保真驗(yàn)證碼生成。

« 5G成為國內(nèi)云計(jì)算的巨大反超國際巨頭的新踏板？ | 網(wǎng)絡(luò)創(chuàng)業(yè)者必須掌握自我克制 »