在本章中，你将学会使用中继器和交互动作创建一个掘金Lottery幸运抽奖工具。
项目背景
在之前多次参加掘金日新计划的创作活动中，几乎没有一次抽中幸运奖，一方面可能由于参加人数太多，另一方面也有可能是本身运气就不太好。
既然官方网站抽不到自己，那么为了安慰自己幼小的心灵，我们自己搭建一个掘金的幸运抽奖工具。
项目搭建
首先，创建一个新项目，命名为Lottery。
页面样式-基础样式
首先，我们设置网站页面的背景填充色，设置为#F0F2F5。
拖入一个“矩形1”组件，设置矩形位置为（40，40），设置尺寸为400*400，设置线宽为0，设置圆角半径为8。
然后，我们复制第一个矩形，位置放置于第一个矩形右边20的位置，横向居中对齐。
拖入一个“文本标签”组件，修改文字为“抽奖名单”。
设置位置为矩形内左侧、上侧均为20的位置，设置字号为14号。同理，复制出一个，修改文字为“中奖名单”，放在第二个矩形相同于第一个矩形的位置。
拖入一个“文本标签”组件，命名为“待抽奖人数”。
修改文字示例为“待抽奖：9人”，设置位置为与“抽奖名单”文字横向对齐且间距10，设置字号为12号字。同理，复制一个出来，设置为“已中奖人数”，示例文字为“已中奖：3人”。
拖入一个“矩形2”组件，作为展示名单突出的背景颜色。
设置尺寸为360*280，位置位于矩形中间，上下间距60、左右间距20的位置，设置圆角半径为8。同理，复制到一个放在第一个白色矩形的位置。
拖入一个“主要按钮”组件，命名为“开始抽奖”。
修改内部文字为“开始抽奖”，设置位置为在矩形居中且下间距为10的位置，设置尺寸为140*40，设置字号为14号字，设置填充颜色为#1890FF，设置圆角半径为4。
同理，拖入一个“按钮”组件，命名为“重置按钮”，修改内部文字为“重置”，位置大小、字号、圆角和开始抽奖按钮保持一致，设置线段颜色为#D4D4D4。
至此，页面的基础样式已经搭建完毕。
页面样式-中继器
下面，我们来完成2个名单列表的制作。
拖入一个“中继器”组件，命名为“input”，点击进入内页，内部的示例的矩形命名为“inPutName”。
在“样式”工具栏中，设置数据项两个表头标题分别为“inputNumber、inputID”，这里inputNumber是用来做排序和后面做抽奖筛选的，inputID则是中继器展示抽奖名单列表的。
我们填写一些示例的数据。
同理，我们再拖入一个“中继器”组件，命名为“output”。
也设置样式和数据项的名称，这里是和上面重复的动作，建议直接复制第一个中继器来修改，这里就不再赘述操作步骤了。
至此，页面样式部分我们就已经完成了。
下一步，我们来实现逻辑交互动作。
逻辑梳理-抽奖逻辑
我们先来分析下抽奖的逻辑，抽奖名单中中奖的ID，会从input的中继器中移动到output中继器中。
由于中继器之间是没有交互操作的，我们需要使用中间变量来进行过渡。
也就是左侧抽奖名单选中的ID，选中的时候，我们加到全局变量进行存储，同时在第二个中继器获取全局变量的值，最后第一个中继器中删除选中的数据，就完成了抽中的ID从抽奖名单中删除，中奖的ID加到中奖名单中。
交互动作-全局变量
我们添加了3个全局变量，一个是selectedNumber，用来储存中奖的ID对应的序号。第二个是selectedID，用来存储中奖的ID。
另外，我们还定义了一个random的全局变量，在后面我们用来存储作为随机数的变量。
交互动作- ID移动
在有了全局变量加持下，我们来实现下ID从抽奖名单移动到中奖名单。
我们点击input中继器进入内页，选中inputName的矩形，在“交互”工具栏中设置交互动作，选择“单击时”，选择“设置变量值”，目标为全局变量selectedID，设置值为“[[item.inputID]]”，同时也设置全局变量selectedNumber值为“[[item.inputNumber]]”。
这样，我们就完成了给全局变量赋值的交互，抽奖名单的ID就传递到了全局变量中。
交互动作-增加/删除行
参数传递上去后，我们还需要将传递的参数从抽奖名单中删除，然后添加到中奖名单中。
在“单击时”下添加交互动作，选择“添加行”，选择目标为“output”中继器，点击“添加行”，设置“outputNumber”的值为全局变量“[[selectedNumber]]”，设置“outputID”的值为全局变量“[[selectedID]]”。
中奖名单增加了数据，同时我们也要在抽奖名单删除对应的数据，添加交互动作，选择“删除行”，目标为“input”中继器，选择“当前”。
这样，我们就完成了点击抽奖名单，将抽奖名单加到中奖名单中的交互动作。
交互动作-排序
由于我们抽奖名单的ID删掉了，我们还需要重新对ID的序号进行重新排序。
在“单击时”下增加交互动作，选择“添加排序”，目标为“input”中继器，选择列为“inputNumber”，选择排序类型为“Number”，选择排序方式为“升序”。
交互动作-更新列表数量
上面，我们实现了抽奖列表和中奖列表的ID传递，那么每次交互时，抽奖名单的人数和中奖名单的人数都会发生变化。
这时，我们还需要动态更新名单中的人数。
添加“设置文本”的交互动作，目标为“待抽奖人数”文本，设置文本为“（待抽奖：[[LVAR1.itemCount]]人）”，其中LVAR1为局部变量，值为元件类型，对应的元件为“input”。
同理，我们也要更新output中奖名单的文本，操作和上述一致，只是元件要变成output。
我们返回到最外面，对于“待抽奖人数、已中奖人数”，由于不知道初始化的时候会加入多少名单，这里也需要设置交互动作。
我们设置“载入时”的交互动作，设置文本获取中继器列表的数量，和上面的方法一致。
交互动作-开始抽奖
接下来，我们来完成下抽奖的动作。
在前面，我们实际上是做了很多铺垫性的交互，Axure的交互逻辑和计算机实现的逻辑是一致的，每一步都需要详细的规划。
所以，不要急，慢慢来。
我们继续。
首先，我们是随机抽奖，那么第一步需要获得抽奖名单的中奖随机数。
选中“开始抽奖”按钮，在交互工具栏中选择“单击时”，选择“设置变量值”目标为全局变量random，设置值为“[[Math.ceil(LVAR1.itemCount*Math.random())]]”。
这是获得随机数的方法，我们通过局部变量定位到input中继器，获得到中继器列表的数量，然后在1～中继器列表数量之间随机取一个数。
交互动作-列表筛选
获得随机中奖的序号后，我们要判断这个需要时input抽奖列表中的哪一个，我们可以筛选出来。
添加交互动作，选择“添加筛选”，目标为input中继器，筛选的规则为中继器的inputNumber序号要等于全局变量random随机数。
这样，我们input中继器就会展示随机中奖的ID。
接下来，我们要把中奖的ID从抽奖名单移动到中奖名单。很简单，我们在之前就完成了这个逻辑，我们只需要触发这个逻辑。
我们可以联动这个操作，增加交互动作，选择“触发事件”，目标为中继器中的矩形inputName，设置事件为“单击时”。
这样，我们就联动了ID移动的交互了。
筛选完成，并把抽奖名单中中奖的ID移动到中奖名单后，我们设置等待500ms后移除筛选，然后input中继器重新展示那些没有中奖的名单。
最后，我们还需要更新标题旁边的“待抽奖”和“已中奖”的数量，这和之前做的一样，这里也不再赘述了。
交互动作-重置
抽奖完成后，我们如果还需要下一次重新抽奖，我们可以给“重置”按钮添加交互动作。
在交互工具栏中，添加“单击时”的交互，选择“打开链接”，选择”重新载入当前页面"。
由于Axure没有数据储存的数据库，这样的交互就相当于重新刷新浏览器的效果。
项目预览
完成后，我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个项目能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
项目地址
Lottery幸运抽奖： ricardowesley.gitee.io/lottery
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～