Axure8.0实例 | 随机双色球,开讲了

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

福彩双色球,大部分朋友对此并不陌生吧,相信买过的朋友或多或少都对此有所研究,今天我们一起来用Axure8.0模拟做一个双色的开奖过程。今天使用的主要知识点有,全局变量的使用,中继器的增删以及排序。

预览:

一、元件准备

1、添加两个中继器,分别用来存放双色的红球和蓝球,取名为“红球”和“蓝球”,初始时隐藏;

  1. 分别在中继器中放入一个椭圆形的元件,其中把放入“红球”中继器的椭圆形元件的边框设置成红色,字体也设置成红色;放入“蓝球”中继器的椭圆形元件的边框设置成蓝色,字体也设置成蓝色;并分别给这两个椭圆形元件命名为“红球中奖号码”和“蓝球中奖号码”;
  2. 设置“红球”中继器的布局样式为水平,并勾选“网格排布”,设置“每排项目数”为6(因为红球数量为6个)。

2、添加四个全局变量,分别取名为“red”、“blue”、“random”、“value”;4个全局变量的作用分别是:

  • red:存放红球的编号数值,我们都知道双色球的红色号码是:01~33,这里我们就把这33个号码存放到“red”这个全局变量中,全局变量的初始值我们这里设置成:<01><02><03><04><05><06><07><08><09><10><11><12><13><14><15><16><17><18><19><20><21><22><23><24><25><26><27><28><29><30><31><32><33>,至于为什么要这样存放,这里先卖个关子,接着往下看就知道;
  • blue:存放蓝球的编号数值,双色球的蓝色号码是:01~16,同“red”变量 一样,这里把全局变量的初始值设置成:<01><02><03><04><05><06><07><08><09><10><11><12><13><14><15><16>;
  • random:存放生成的随机数,默认为为空,目的是截取“red”或“blue”变量内容的开始下标;
  • value:获取从变量“red”或“blue”中截取到的号码,默认值为空。

3、添加7个椭圆形的元件,分别明明为“1”、“2”、“3”、“4”、“5”、“6”、“7”,用来存放开奖时随机抽取的号码,其中前6个为红色球,最后一个为蓝色球,并将这7个元件设置成隐藏;

4、最后,还需要一个按钮,命名为“抽奖”,初始文字内容为“开始抽奖”;

至此,所有的元件已经添加完毕,当然你也可以添加几个文字标签,让界面更加醒目,我这里偷个懒,就不加文字标签了。

二、添加用例

1、首先给“抽奖”按钮添加用例

“抽奖”按钮有两种情况:

  • 第一次抽奖;
  • 重新抽奖。

我们可以根据“抽奖”按钮的文字内容去判断是不是为第一次抽奖。

(1)如果“抽奖”按钮的文字内容为“开始抽奖”,那么我们要执行以下用例:

1)给全局变量“random”获取一个随机值,且这个值有一定的限值条件,这个值的范围必须是:0~132,不能等于132,且必须是4的倍数。

  • 为什么是这个范围?因为“random”要跟“red”的长度去匹配,用于后续的截取“red”内的特定内容的开始位置,而“red”变量的初始值的长度就是132(下标是从0开始的,所以“red”标量的最大小标是131);
  • 为什么必须是4的倍数?因为我们在定义“red”变量的时候是通过<>区分每一个球的号码的,且包括<>在内,每一个号码的长度都是4;
  • 怎么样获取这个数值?这里要用到数学函数里的随机函数random(),因为Math.random()函数获取的是0~1之间的小数,所以就需要通过特定的处理获取0~132之间且为4的倍数的数字,通过Math.random()*99/3获取0~33之间的数值,然后通过数学函数Math.floor()向下取整数,这样就能取到0~32之间的全部整数,且包括0和32,然后再诚意4,就能取得0~132之间所有4的倍数的数值(包括0,不包括132);

2)给全局变量“value”设置值,因为“value”变量是用来存放“red”或“blue”变量中截取的号码的,在开始点击“抽奖”按钮时,一般是从红色球开始的,所以这里就要从“red”变量中截取抽中的红色球的号码,前面已经提到过,球的号码是通过<>开始和结束的,所以我们这里在截取球的号码值时是截取长度为4,通过字符串函数substr()截取;

3)取得第一个红色球的号码,椭圆形元件“1”是用来存放 第一个红色球的,所以就把第一个红色球的号码,赋给“1”。因为截取的号码包括<>的4位长度的字符串,我们这里只需要<>内的数值就可以了,所以还需要通过字符串函数substr()去截取“value”变量内的数值,数值的长度是2;

4)显示“1”。给“1”添加一个动画,这样更直观一些,我这里添加了一个“向右翻转”的一个动画,时间是1s,大家可以根据自己喜好自行设计;

5)设定“red”变量值。这一步很重要,目的是防止取到相同的红色球号码。双色球里,每个球最多只能取到一次,我还没见到过取到两个相同号码的红色球^_^,因为我们每次取红色球时,都是从“red”变量中截取的一段,所以每次在截取“red”后,就要把已经取到的这段字符串从“red”变量中去掉,这样就再也取不到这段字符串了,这样就避免了取到重复号码的红色球了。设定“red”变量值是通过字符串替换函数replace(),如果不明白replace()函数的用法,大家可以问下度娘,它可是无所不能的哦;

6)添加“红球”中继器。这一步的目的是为了后续生成中奖号码排序用的。因为在axure中,貌似只能在中继器红可以排序(双色球开奖时的号码是随机的,开奖过程中并不是按大小出来号码的,而是在中奖号码全部出来之后才按照大小排序的)。我们把“1”元件的文字内容添加到“红球”中继器中备用;

7)禁用“抽奖”按钮。我们点击“抽奖”按钮,已经开始抽奖了,总不能还可以再去点击“抽奖”吧,这样岂不是乱套了,所以,这里要把“抽奖”按钮置为禁用状态。为了更加直观,可以给“抽奖”按钮设置文字内容“抽奖中……”;

8)添加“触发事件”到“2”元件。Axure8.0中增加了一个“触发事件”的用例,可以直接通过“触发事件”去执行另外一个元件上的特定的用例,我们这里把添加的用例都在“鼠标单击时”,所以这里的“触发事件”触发的是“2”元件的“鼠标单击时”用例;

(2)如果不是第一次抽奖,那么我们就要按照以下的方式处理“抽奖”按钮的用例了;

  1. 隐藏“1”、“2”、“3”、“4”、“5”、“6”、“7”元件。如果不是第一次抽奖,那么这7个元件是显示状态的,所以在点击“抽奖”按钮是,首先要把这7个元件设置为隐藏状态;
  2. 删除“红球”、“蓝球”中继器中的数据。清除之前抽奖的数据;
  3. 移除“红球”中继器的排序。清除“红球”中继器之前的排序规则(此处可以不需要,看个人喜好);
  4. 设置“random”、“value”、“1”元件值、给“1”元件添加显示动画、“red”、添加“红球”中继器值、禁用“抽奖”、“抽奖”按钮文字内容以及添加“触发事件”到“2”元件与第一次抽奖是一样的,此处就忽略了;
  5. 隐藏“红球”、“蓝球”中继器。因为在第一次抽奖的时候,把这两个中继器显示了,这里重新隐藏一下即可;

2、给“2”元件添加用例

(1)等待1s。让两次取球有一定的时间间隔,具体间隔时间长短可自行设计。当然,也可以不设置,这样就直接获取所有的中奖号码;

(2)给“random”全局变量获取一个随机值,规则同上,这里就不赘述了。不同的地方是取值的方为不一样了,因为在取得第一个球之后,“red”的值已经发生变化了(去掉了第一个球的内容),所以“red”的长度其实已经变化了,所以“random”的取值也要跟着变化,不然就可能越界了,取不到值了。至于为什么是这样取值的,大家可以思考一下;

(3)“value”、“2”元件、“red”等内容的处理跟上面的是一样的,所以就不做过多的说明了;

(4)添加“触发事件”到“3”元件。跟上面的添加“触发事件”到“2”是一样的。

3、给“3”元件添加用例

除了“random”和添加“触发事件”到“4”元件之外,其余的同上。“random”设置如下:

4、给“4”元件添加用例

除了“random”和添加“触发事件”到“5”元件之外,其余的同上。“random”设置如下:

5、给“5”元件添加用例

除了“random”和添加“触发事件”到“6”元件之外,其余的同上。“random”设置如下:

6、给“6”元件添加用例

(1)“random”设置如下:

(2)设置“red”值为初始值。因为到此时红色球已经取完了,用不到“red”这个变量了,所以这里先把它设置成初始值。还记得“red”的初始值吧?如果不记得就往前面翻翻看;

(3)添加“触发事件”到“7”元件,其他都一样;

7、给“7”元件添加用例

(1)相同的部分就不说了哈,自行参照上面的即可;

(2)“random”值设置如下,这里为什么是这样的?因为“blue”变量的值的长度是64嘛;

(3)“value”值设置如下(看清楚了哦,这里是用的“blue”哈,不要问我为什么,不然我会打你的,因为“7”元件存放是蓝色球啊~);

(4)把蓝球号码添加到“蓝球”中继器中去;

(5)给红色球排序。习惯性动作,在排序之前先删除移除所有的排序,不要纠结为什么了,习惯而已;

(6)至此,双色球的7个号码(6个红色,1个蓝色)都已经取到了,那么我们想要重新抽奖呢,肯定是要把“抽奖”按钮启用啊,因为不是第一次抽奖了,所以可把“抽奖”按钮的文字内容给重新定义一下嘛,这里就定义成“重新抽奖”了;

(7)不光要把“抽奖”按钮给启用了,还要把排序后的“红球”中继器和“蓝球”中继器显示出来啊,不然怎么能算完事了呢(双色球开奖的红色球号码是有顺序的哦);

三、预览

忙碌了现在了,如果看不到成果岂不是很伤心,所以,赶紧F5一下吧,看看自己的五百万是不是已经在路上了。当然,你也可以根据自己开奖的号码去福彩中心兑奖的了,前提是你要去彩票站买注双色球,而且还要中奖哦,不然会被打的,到时可别怨我哈。若要真的中奖了,可别忘记了我。^_^

PS:如果有什么问题,或者有什么想要实现的小功能,大家可以给我留言,我们一起学习!

 

本文由 @无泪 原创发布于人人都是产品经理。未经许可,禁止转载。

赞赏是对原创者的最大认可
3人打赏
评论
欢迎留言交流
  1. 1.不懂为什么 random()*99/3,直接 *33 可以吗?
    2.中继器设置不成功,最后也未能排序。

    回复
    1. 可以关注公众号,后续所有的文章都会在第一时间更新到公众号,敬请关注~ ;-)

      回复
  2. 差评 按照你的步骤都没错,弄了一上午 还没有弄成功 呜呜呜~~

    回复
    1. :o 可以加群下载原型

      回复
    2. 求详细教程 :cry:

      回复
    3. 还不够详细? :shock:

      回复
    4. 好多还不明白 毕竟我是一个新人

      回复
    5. 搜索微信公众号杨小贝,后续会在里面更新原型

      回复
    6. 群号多少啊?

      回复
    7. 微信公众号:杨小贝,后续文章都会在里面更新

      回复
    8. 关注了,但是一直没有更新

      回复
  3. 厉害厉害

    回复
    1. :smile:

      回复
  4. 厉害厉害 :cool:

    回复
    1. :smile:

      回复
  5. 今天干货满满啊,谢谢分享

    回复
    1. 一起学习,一起交流 ;-)

      回复
  6. 这个高级了

    回复
    1. ;-)

      回复