Service UnavailableAxure8.0实例 | 随机双色球，开讲了Axure8.0实例 | 随机双色球，开讲了人人都是产品经理百家号福彩双色球，大部分朋友对此并不陌生吧，相信买过的朋友或多或少都对此有所研究，今天我们一起来用Axure8.0模拟做一个双色的开奖过程。今天使用的主要知识点有，全局变量的使用，中继器的增删以及排序。预览：一、元件准备1、添加两个中继器，分别用来存放双色的红球和蓝球，取名为“红球”和“蓝球”，初始时隐藏；分别在中继器中放入一个椭圆形的元件，其中把放入“红球”中继器的椭圆形元件的边框设置成红色，字体也设置成红色；放入“蓝球”中继器的椭圆形元件的边框设置成蓝色，字体也设置成蓝色；并分别给这两个椭圆形元件命名为“红球中奖号码”和“蓝球中奖号码”；设置“红球”中继器的布局样式为水平，并勾选“网格排布”，设置“每排项目数”为6(因为红球数量为6个)。2、添加四个全局变量，分别取名为“red”、“blue”、“random”、“value”；4个全局变量的作用分别是：red：存放红球的编号数值，我们都知道双色球的红色号码是：01~33，这里我们就把这33个号码存放到“red”这个全局变量中，全局变量的初始值我们这里设置成：，至于为什么要这样存放，这里先卖个关子，接着往下看就知道；blue：存放蓝球的编号数值，双色球的蓝色号码是：01~16，同“red”变量一样，这里把全局变量的初始值设置成：；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”、“2”、“3”、“4”、“5”、“6”、“7”元件。如果不是第一次抽奖，那么这7个元件是显示状态的，所以在点击“抽奖”按钮是，首先要把这7个元件设置为隐藏状态；删除“红球”、“蓝球”中继器中的数据。清除之前抽奖的数据；移除“红球”中继器的排序。清除“红球”中继器之前的排序规则(此处可以不需要，看个人喜好)；设置“random”、“value”、“1”元件值、给“1”元件添加显示动画、“red”、添加“红球”中继器值、禁用“抽奖”、“抽奖”按钮文字内容以及添加“触发事件”到“2”元件与第一次抽奖是一样的，此处就忽略了；隐藏“红球”、“蓝球”中继器。因为在第一次抽奖的时候，把这两个中继器显示了，这里重新隐藏一下即可；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：如果有什么问题，或者有什么想要实现的小功能，大家可以给我留言，我们一起学习！本文由@无泪原创发布于人人都是产品经理。未经许可，禁止转载。本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。人人都是产品经理百家号最近更新：简介:产品经理和互联网运营的成长摇篮。作者最新文章相关文章行业关键字
axure原型设计之转盘抽奖
转盘抽奖一般会出现在一些金融类网站中，通过转盘抽奖来激活用户浏览行为，后来又多用于微信的公众号运营中，通过转盘抽奖来宣传活动，从而达到吸粉的目的。这一章就教大家如何使用axure原型工具制作转盘抽奖原型。
第一步：拖拉摆放好相关控件
1、转盘：300X300的白底黑框圆形，一条垂直线、一条45度垂直线、一条水平线、一条45度水平线，四线交叉组合居中放于白底黑框圆形上方，将白底黑框圆形等分切割成八份，每一份放一个文本标签，文本标签的文字角度可通过键盘微调适当即可，文本标签的文字有三个分别是“一等奖”，“二等奖”和“三等奖”，其余的皆为“谢谢惠顾”，将以上元件组合并命名为“转盘”。
2、抽奖按钮：100X100的灰底黑框圆形，中间文字为“抽奖”，将此元件命名为“抽奖按钮”，并居中置于“转盘”上方。
3、抽奖指针：10X32的灰底黑框三角形，将此元件命名为“抽奖指针”，并置于“抽奖按钮”的正上方。
第二步：为“抽奖按钮”添加鼠标单击时用例
此用例中只添加一个动作，即：相对旋转转盘，角度为[[100000+Math.random()*360]]，方向为顺时针，锚点为中心，动画为线性，时间为2000毫秒。
好了，预览并点击“抽奖按钮”即可以看到转盘抽奖效果。同时也可以随时关注我的个人博客：，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。
效果图：抽奖附件下载：
作者：维度转载请注明出处：
（责任编辑：）
北京科技大学工业设计系教授、计算机与通信工程学院博导、上海美术学院博士生导师、台湾华梵大学客座教授… []
欢迎关注视觉同盟微信公众号：
微信公众平台：搜索“vudn2004”或扫描下面二维码：
版权所有 &
视觉同盟（VisionUnion.com）
Copyright &
VisionUnion.com Incorporated. All rights reserved
视觉同盟旗下子站： |求 axure视频教程_百度知道
求 axure视频教程
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
139726pjnhmr
139726pjnhmr
采纳数：16472
获赞数：31681
来自：求助得到的回答
为你推荐：
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}