在本章中,，你將學(xué)會(huì)使用中繼器和交互動(dòng)作創(chuàng)建一個(gè)掘金Lottery幸運(yùn)抽獎(jiǎng)工具,。

項(xiàng)目背景

在之前多次參加掘金日新計(jì)劃的創(chuàng)作活動(dòng)中，幾乎沒有一次抽中幸運(yùn)獎(jiǎng),，一方面可能由于參加人數(shù)太多,，另一方面也有可能是本身運(yùn)氣就不太好。

既然官方網(wǎng)站抽不到自己,，那么為了安慰自己幼小的心靈,，我們自己搭建一個(gè)掘金的幸運(yùn)抽獎(jiǎng)工具。

項(xiàng)目搭建

首先,，創(chuàng)建一個(gè)新項(xiàng)目,，命名為Lottery。

頁面樣式-基礎(chǔ)樣式

首先,，我們?cè)O(shè)置網(wǎng)站頁面的背景填充色,，設(shè)置為#F0F2F5,。

拖入一個(gè)“矩形1”組件，設(shè)置矩形位置為（40,，40）,，設(shè)置尺寸為400*400，設(shè)置線寬為0,，設(shè)置圓角半徑為8,。

然后，我們復(fù)制第一個(gè)矩形,，位置放置于第一個(gè)矩形右邊20的位置,，橫向居中對(duì)齊。

拖入一個(gè)“文本標(biāo)簽”組件,，修改文字為“抽獎(jiǎng)名單”,。

設(shè)置位置為矩形內(nèi)左側(cè)、上側(cè)均為20的位置,，設(shè)置字號(hào)為14號(hào),。同理，復(fù)制出一個(gè),，修改文字為“中獎(jiǎng)名單”,，放在第二個(gè)矩形相同于第一個(gè)矩形的位置,。

拖入一個(gè)“文本標(biāo)簽”組件,，命名為“待抽獎(jiǎng)人數(shù)”。

修改文字示例為“待抽獎(jiǎng)：9人”,，設(shè)置位置為與“抽獎(jiǎng)名單”文字橫向?qū)R且間距10,，設(shè)置字號(hào)為12號(hào)字。同理,，復(fù)制一個(gè)出來,，設(shè)置為“已中獎(jiǎng)人數(shù)”，示例文字為“已中獎(jiǎng)：3人”,。

拖入一個(gè)“矩形2”組件,，作為展示名單突出的背景顏色。

設(shè)置尺寸為360*280,，位置位于矩形中間,，上下間距60、左右間距20的位置,，設(shè)置圓角半徑為8,。同理，復(fù)制到一個(gè)放在第一個(gè)白色矩形的位置,。

拖入一個(gè)“主要按鈕”組件,，命名為“開始抽獎(jiǎng)”,。

修改內(nèi)部文字為“開始抽獎(jiǎng)”，設(shè)置位置為在矩形居中且下間距為10的位置,，設(shè)置尺寸為140*40,，設(shè)置字號(hào)為14號(hào)字，設(shè)置填充顏色為#1890FF,，設(shè)置圓角半徑為4,。

同理，拖入一個(gè)“按鈕”組件,，命名為“重置按鈕”,，修改內(nèi)部文字為“重置”，位置大小,、字號(hào),、圓角和開始抽獎(jiǎng)按鈕保持一致，設(shè)置線段顏色為#D4D4D4,。

至此,，頁面的基礎(chǔ)樣式已經(jīng)搭建完畢。

頁面樣式-中繼器

下面,，我們來完成2個(gè)名單列表的制作,。

拖入一個(gè)“中繼器”組件，命名為“input”,，點(diǎn)擊進(jìn)入內(nèi)頁,，內(nèi)部的示例的矩形命名為“inPutName”。

在“樣式”工具欄中,，設(shè)置數(shù)據(jù)項(xiàng)兩個(gè)表頭標(biāo)題分別為“inputNumber,、inputID”，這里inputNumber是用來做排序和后面做抽獎(jiǎng)篩選的,，inputID則是中繼器展示抽獎(jiǎng)名單列表的,。

我們填寫一些示例的數(shù)據(jù)。

同理,，我們?cè)偻先胍粋€(gè)“中繼器”組件,，命名為“output”。

也設(shè)置樣式和數(shù)據(jù)項(xiàng)的名稱,，這里是和上面重復(fù)的動(dòng)作,，建議直接復(fù)制第一個(gè)中繼器來修改，這里就不再贅述操作步驟了,。

至此,，頁面樣式部分我們就已經(jīng)完成了。

下一步,，我們來實(shí)現(xiàn)邏輯交互動(dòng)作,。

邏輯梳理-抽獎(jiǎng)邏輯

我們先來分析下抽獎(jiǎng)的邏輯,，抽獎(jiǎng)名單中中獎(jiǎng)的ID，會(huì)從input的中繼器中移動(dòng)到output中繼器中,。

由于中繼器之間是沒有交互操作的,，我們需要使用中間變量來進(jìn)行過渡。

也就是左側(cè)抽獎(jiǎng)名單選中的ID,，選中的時(shí)候,，我們加到全局變量進(jìn)行存儲(chǔ)，同時(shí)在第二個(gè)中繼器獲取全局變量的值,，最后第一個(gè)中繼器中刪除選中的數(shù)據(jù),，就完成了抽中的ID從抽獎(jiǎng)名單中刪除，中獎(jiǎng)的ID加到中獎(jiǎng)名單中,。

交互動(dòng)作-全局變量

我們添加了3個(gè)全局變量,，一個(gè)是selectedNumber，用來儲(chǔ)存中獎(jiǎng)的ID對(duì)應(yīng)的序號(hào),。第二個(gè)是selectedID,，用來存儲(chǔ)中獎(jiǎng)的ID。

另外,，我們還定義了一個(gè)random的全局變量,，在后面我們用來存儲(chǔ)作為隨機(jī)數(shù)的變量。

交互動(dòng)作- ID移動(dòng)

在有了全局變量加持下,，我們來實(shí)現(xiàn)下ID從抽獎(jiǎng)名單移動(dòng)到中獎(jiǎng)名單,。

我們點(diǎn)擊input中繼器進(jìn)入內(nèi)頁，選中inputName的矩形,，在“交互”工具欄中設(shè)置交互動(dòng)作,，選擇“單擊時(shí)”，選擇“設(shè)置變量值”,，目標(biāo)為全局變量selectedID，設(shè)置值為“[[item.inputID]]”,，同時(shí)也設(shè)置全局變量selectedNumber值為“[[item.inputNumber]]”,。

這樣，我們就完成了給全局變量賦值的交互,，抽獎(jiǎng)名單的ID就傳遞到了全局變量中。

交互動(dòng)作-增加/刪除行

參數(shù)傳遞上去后，我們還需要將傳遞的參數(shù)從抽獎(jiǎng)名單中刪除,，然后添加到中獎(jiǎng)名單中,。

在“單擊時(shí)”下添加交互動(dòng)作，選擇“添加行”,，選擇目標(biāo)為“output”中繼器,，點(diǎn)擊“添加行”,，設(shè)置“outputNumber”的值為全局變量“[[selectedNumber]]”，設(shè)置“outputID”的值為全局變量“[[selectedID]]”,。

中獎(jiǎng)名單增加了數(shù)據(jù),，同時(shí)我們也要在抽獎(jiǎng)名單刪除對(duì)應(yīng)的數(shù)據(jù)，添加交互動(dòng)作,，選擇“刪除行”,，目標(biāo)為“input”中繼器，選擇“當(dāng)前”,。

這樣,，我們就完成了點(diǎn)擊抽獎(jiǎng)名單，將抽獎(jiǎng)名單加到中獎(jiǎng)名單中的交互動(dòng)作,。

交互動(dòng)作-排序

由于我們抽獎(jiǎng)名單的ID刪掉了,，我們還需要重新對(duì)ID的序號(hào)進(jìn)行重新排序。

在“單擊時(shí)”下增加交互動(dòng)作,，選擇“添加排序”,，目標(biāo)為“input”中繼器，選擇列為“inputNumber”,，選擇排序類型為“Number”,，選擇排序方式為“升序”。

交互動(dòng)作-更新列表數(shù)量

上面,，我們實(shí)現(xiàn)了抽獎(jiǎng)列表和中獎(jiǎng)列表的ID傳遞,，那么每次交互時(shí)，抽獎(jiǎng)名單的人數(shù)和中獎(jiǎng)名單的人數(shù)都會(huì)發(fā)生變化,。

這時(shí),，我們還需要?jiǎng)討B(tài)更新名單中的人數(shù)。

添加“設(shè)置文本”的交互動(dòng)作,，目標(biāo)為“待抽獎(jiǎng)人數(shù)”文本,，設(shè)置文本為“（待抽獎(jiǎng)：[[LVAR1.itemCount]]人）”，其中LVAR1為局部變量,，值為元件類型,，對(duì)應(yīng)的元件為“input”。

同理,，我們也要更新output中獎(jiǎng)名單的文本,，操作和上述一致，只是元件要變成output,。

我們返回到最外面,，對(duì)于“待抽獎(jiǎng)人數(shù)、已中獎(jiǎng)人數(shù)”,，由于不知道初始化的時(shí)候會(huì)加入多少名單,，這里也需要設(shè)置交互動(dòng)作,。

我們?cè)O(shè)置“載入時(shí)”的交互動(dòng)作，設(shè)置文本獲取中繼器列表的數(shù)量,，和上面的方法一致,。

交互動(dòng)作-開始抽獎(jiǎng)

接下來，我們來完成下抽獎(jiǎng)的動(dòng)作,。

在前面,，我們實(shí)際上是做了很多鋪墊性的交互，Axure的交互邏輯和計(jì)算機(jī)實(shí)現(xiàn)的邏輯是一致的,，每一步都需要詳細(xì)的規(guī)劃,。

所以，不要急,，慢慢來,。

我們繼續(xù)。

首先,，我們是隨機(jī)抽獎(jiǎng),，那么第一步需要獲得抽獎(jiǎng)名單的中獎(jiǎng)隨機(jī)數(shù)。

選中“開始抽獎(jiǎng)”按鈕,，在交互工具欄中選擇“單擊時(shí)”,，選擇“設(shè)置變量值”目標(biāo)為全局變量random，設(shè)置值為“[[Math.ceil(LVAR1.itemCount*Math.random())]]”,。

這是獲得隨機(jī)數(shù)的方法,，我們通過局部變量定位到input中繼器，獲得到中繼器列表的數(shù)量,，然后在1～中繼器列表數(shù)量之間隨機(jī)取一個(gè)數(shù),。

交互動(dòng)作-列表篩選

獲得隨機(jī)中獎(jiǎng)的序號(hào)后，我們要判斷這個(gè)需要時(shí)input抽獎(jiǎng)列表中的哪一個(gè),，我們可以篩選出來,。

添加交互動(dòng)作，選擇“添加篩選”,，目標(biāo)為input中繼器,，篩選的規(guī)則為中繼器的inputNumber序號(hào)要等于全局變量random隨機(jī)數(shù)。

這樣,，我們input中繼器就會(huì)展示隨機(jī)中獎(jiǎng)的ID。

接下來,，我們要把中獎(jiǎng)的ID從抽獎(jiǎng)名單移動(dòng)到中獎(jiǎng)名單,。很簡單，我們?cè)谥熬屯瓿闪诉@個(gè)邏輯,，我們只需要觸發(fā)這個(gè)邏輯,。

我們可以聯(lián)動(dòng)這個(gè)操作,，增加交互動(dòng)作，選擇“觸發(fā)事件”,，目標(biāo)為中繼器中的矩形inputName,，設(shè)置事件為“單擊時(shí)”。

這樣,，我們就聯(lián)動(dòng)了ID移動(dòng)的交互了,。

篩選完成，并把抽獎(jiǎng)名單中中獎(jiǎng)的ID移動(dòng)到中獎(jiǎng)名單后,，我們?cè)O(shè)置等待500ms后移除篩選,，然后input中繼器重新展示那些沒有中獎(jiǎng)的名單。

最后,，我們還需要更新標(biāo)題旁邊的“待抽獎(jiǎng)”和“已中獎(jiǎng)”的數(shù)量,，這和之前做的一樣，這里也不再贅述了,。

交互動(dòng)作-重置

抽獎(jiǎng)完成后,，我們?nèi)绻€需要下一次重新抽獎(jiǎng)，我們可以給“重置”按鈕添加交互動(dòng)作,。

在交互工具欄中,，添加“單擊時(shí)”的交互，選擇“打開鏈接”,，選擇”重新載入當(dāng)前頁面",。

由于Axure沒有數(shù)據(jù)儲(chǔ)存的數(shù)據(jù)庫，這樣的交互就相當(dāng)于重新刷新瀏覽器的效果,。

項(xiàng)目預(yù)覽

完成后,，我們?cè)跒g覽器中預(yù)覽下效果。

哈哈哈,，效果不錯(cuò),！

為了讓這個(gè)項(xiàng)目能夠公開訪問，我們可以生成html文件,，然后發(fā)布到gitHub或者gitee中,，這樣就可以將網(wǎng)站分享給朋友們了。

項(xiàng)目地址

Lottery幸運(yùn)抽獎(jiǎng)： ricardowesley./lottery

快來動(dòng)手試試吧,！

如果本專欄對(duì)你有幫助,，不妨點(diǎn)贊、評(píng)論,、關(guān)注～