Axure8.0實(shí)例 | 隨機(jī)雙色球,開講了
福彩雙色球,大部分朋友對(duì)此并不陌生吧,相信買過的朋友或多或少都對(duì)此有所研究,今天我們一起來用Axure8.0模擬做一個(gè)雙色的開獎(jiǎng)過程。今天使用的主要知識(shí)點(diǎn)有,全局變量的使用,中繼器的增刪以及排序。
預(yù)覽:
一、元件準(zhǔn)備
1、添加兩個(gè)中繼器,分別用來存放雙色的紅球和藍(lán)球,取名為“紅球”和“藍(lán)球”,初始時(shí)隱藏;
- 分別在中繼器中放入一個(gè)橢圓形的元件,其中把放入“紅球”中繼器的橢圓形元件的邊框設(shè)置成紅色,字體也設(shè)置成紅色;放入“藍(lán)球”中繼器的橢圓形元件的邊框設(shè)置成藍(lán)色,字體也設(shè)置成藍(lán)色;并分別給這兩個(gè)橢圓形元件命名為“紅球中獎(jiǎng)號(hào)碼”和“藍(lán)球中獎(jiǎng)號(hào)碼”;
- 設(shè)置“紅球”中繼器的布局樣式為水平,并勾選“網(wǎng)格排布”,設(shè)置“每排項(xiàng)目數(shù)”為6(因?yàn)榧t球數(shù)量為6個(gè))。
2、添加四個(gè)全局變量,分別取名為“red”、“blue”、“random”、“value”;4個(gè)全局變量的作用分別是:
- red:存放紅球的編號(hào)數(shù)值,我們都知道雙色球的紅色號(hào)碼是:01~33,這里我們就把這33個(gè)號(hào)碼存放到“red”這個(gè)全局變量中,全局變量的初始值我們這里設(shè)置成:<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>,至于為什么要這樣存放,這里先賣個(gè)關(guān)子,接著往下看就知道;
- blue:存放藍(lán)球的編號(hào)數(shù)值,雙色球的藍(lán)色號(hào)碼是:01~16,同“red”變量 一樣,這里把全局變量的初始值設(shè)置成:<01><02><03><04><05><06><07><08><09><10><11><12><13><14><15><16>;
- random:存放生成的隨機(jī)數(shù),默認(rèn)為為空,目的是截取“red”或“blue”變量內(nèi)容的開始下標(biāo);
- value:獲取從變量“red”或“blue”中截取到的號(hào)碼,默認(rèn)值為空。
3、添加7個(gè)橢圓形的元件,分別明明為“1”、“2”、“3”、“4”、“5”、“6”、“7”,用來存放開獎(jiǎng)時(shí)隨機(jī)抽取的號(hào)碼,其中前6個(gè)為紅色球,最后一個(gè)為藍(lán)色球,并將這7個(gè)元件設(shè)置成隱藏;
4、最后,還需要一個(gè)按鈕,命名為“抽獎(jiǎng)”,初始文字內(nèi)容為“開始抽獎(jiǎng)”;
至此,所有的元件已經(jīng)添加完畢,當(dāng)然你也可以添加幾個(gè)文字標(biāo)簽,讓界面更加醒目,我這里偷個(gè)懶,就不加文字標(biāo)簽了。
二、添加用例
1、首先給“抽獎(jiǎng)”按鈕添加用例
“抽獎(jiǎng)”按鈕有兩種情況:
- 第一次抽獎(jiǎng);
- 重新抽獎(jiǎng)。
我們可以根據(jù)“抽獎(jiǎng)”按鈕的文字內(nèi)容去判斷是不是為第一次抽獎(jiǎng)。
(1)如果“抽獎(jiǎng)”按鈕的文字內(nèi)容為“開始抽獎(jiǎng)”,那么我們要執(zhí)行以下用例:
1)給全局變量“random”獲取一個(gè)隨機(jī)值,且這個(gè)值有一定的限值條件,這個(gè)值的范圍必須是:0~132,不能等于132,且必須是4的倍數(shù)。
- 為什么是這個(gè)范圍?因?yàn)椤皉andom”要跟“red”的長度去匹配,用于后續(xù)的截取“red”內(nèi)的特定內(nèi)容的開始位置,而“red”變量的初始值的長度就是132(下標(biāo)是從0開始的,所以“red”標(biāo)量的最大小標(biāo)是131);
- 為什么必須是4的倍數(shù)?因?yàn)槲覀冊(cè)诙x“red”變量的時(shí)候是通過<>區(qū)分每一個(gè)球的號(hào)碼的,且包括<>在內(nèi),每一個(gè)號(hào)碼的長度都是4;
- 怎么樣獲取這個(gè)數(shù)值?這里要用到數(shù)學(xué)函數(shù)里的隨機(jī)函數(shù)random(),因?yàn)镸ath.random()函數(shù)獲取的是0~1之間的小數(shù),所以就需要通過特定的處理獲取0~132之間且為4的倍數(shù)的數(shù)字,通過Math.random()*99/3獲取0~33之間的數(shù)值,然后通過數(shù)學(xué)函數(shù)Math.floor()向下取整數(shù),這樣就能取到0~32之間的全部整數(shù),且包括0和32,然后再誠意4,就能取得0~132之間所有4的倍數(shù)的數(shù)值(包括0,不包括132);
2)給全局變量“value”設(shè)置值,因?yàn)椤皏alue”變量是用來存放“red”或“blue”變量中截取的號(hào)碼的,在開始點(diǎn)擊“抽獎(jiǎng)”按鈕時(shí),一般是從紅色球開始的,所以這里就要從“red”變量中截取抽中的紅色球的號(hào)碼,前面已經(jīng)提到過,球的號(hào)碼是通過<>開始和結(jié)束的,所以我們這里在截取球的號(hào)碼值時(shí)是截取長度為4,通過字符串函數(shù)substr()截??;
3)取得第一個(gè)紅色球的號(hào)碼,橢圓形元件“1”是用來存放 第一個(gè)紅色球的,所以就把第一個(gè)紅色球的號(hào)碼,賦給“1”。因?yàn)榻厝〉奶?hào)碼包括<>的4位長度的字符串,我們這里只需要<>內(nèi)的數(shù)值就可以了,所以還需要通過字符串函數(shù)substr()去截取“value”變量內(nèi)的數(shù)值,數(shù)值的長度是2;
4)顯示“1”。給“1”添加一個(gè)動(dòng)畫,這樣更直觀一些,我這里添加了一個(gè)“向右翻轉(zhuǎn)”的一個(gè)動(dòng)畫,時(shí)間是1s,大家可以根據(jù)自己喜好自行設(shè)計(jì);
5)設(shè)定“red”變量值。這一步很重要,目的是防止取到相同的紅色球號(hào)碼。雙色球里,每個(gè)球最多只能取到一次,我還沒見到過取到兩個(gè)相同號(hào)碼的紅色球^_^,因?yàn)槲覀兠看稳〖t色球時(shí),都是從“red”變量中截取的一段,所以每次在截取“red”后,就要把已經(jīng)取到的這段字符串從“red”變量中去掉,這樣就再也取不到這段字符串了,這樣就避免了取到重復(fù)號(hào)碼的紅色球了。設(shè)定“red”變量值是通過字符串替換函數(shù)replace(),如果不明白replace()函數(shù)的用法,大家可以問下度娘,它可是無所不能的哦;
6)添加“紅球”中繼器。這一步的目的是為了后續(xù)生成中獎(jiǎng)號(hào)碼排序用的。因?yàn)樵赼xure中,貌似只能在中繼器紅可以排序(雙色球開獎(jiǎng)時(shí)的號(hào)碼是隨機(jī)的,開獎(jiǎng)過程中并不是按大小出來號(hào)碼的,而是在中獎(jiǎng)號(hào)碼全部出來之后才按照大小排序的)。我們把“1”元件的文字內(nèi)容添加到“紅球”中繼器中備用;
7)禁用“抽獎(jiǎng)”按鈕。我們點(diǎn)擊“抽獎(jiǎng)”按鈕,已經(jīng)開始抽獎(jiǎng)了,總不能還可以再去點(diǎn)擊“抽獎(jiǎng)”吧,這樣豈不是亂套了,所以,這里要把“抽獎(jiǎng)”按鈕置為禁用狀態(tài)。為了更加直觀,可以給“抽獎(jiǎng)”按鈕設(shè)置文字內(nèi)容“抽獎(jiǎng)中……”;
8)添加“觸發(fā)事件”到“2”元件。Axure8.0中增加了一個(gè)“觸發(fā)事件”的用例,可以直接通過“觸發(fā)事件”去執(zhí)行另外一個(gè)元件上的特定的用例,我們這里把添加的用例都在“鼠標(biāo)單擊時(shí)”,所以這里的“觸發(fā)事件”觸發(fā)的是“2”元件的“鼠標(biāo)單擊時(shí)”用例;
(2)如果不是第一次抽獎(jiǎng),那么我們就要按照以下的方式處理“抽獎(jiǎng)”按鈕的用例了;
- 隱藏“1”、“2”、“3”、“4”、“5”、“6”、“7”元件。如果不是第一次抽獎(jiǎng),那么這7個(gè)元件是顯示狀態(tài)的,所以在點(diǎn)擊“抽獎(jiǎng)”按鈕是,首先要把這7個(gè)元件設(shè)置為隱藏狀態(tài);
- 刪除“紅球”、“藍(lán)球”中繼器中的數(shù)據(jù)。清除之前抽獎(jiǎng)的數(shù)據(jù);
- 移除“紅球”中繼器的排序。清除“紅球”中繼器之前的排序規(guī)則(此處可以不需要,看個(gè)人喜好);
- 設(shè)置“random”、“value”、“1”元件值、給“1”元件添加顯示動(dòng)畫、“red”、添加“紅球”中繼器值、禁用“抽獎(jiǎng)”、“抽獎(jiǎng)”按鈕文字內(nèi)容以及添加“觸發(fā)事件”到“2”元件與第一次抽獎(jiǎng)是一樣的,此處就忽略了;
- 隱藏“紅球”、“藍(lán)球”中繼器。因?yàn)樵诘谝淮纬楠?jiǎng)的時(shí)候,把這兩個(gè)中繼器顯示了,這里重新隱藏一下即可;
2、給“2”元件添加用例
(1)等待1s。讓兩次取球有一定的時(shí)間間隔,具體間隔時(shí)間長短可自行設(shè)計(jì)。當(dāng)然,也可以不設(shè)置,這樣就直接獲取所有的中獎(jiǎng)號(hào)碼;
(2)給“random”全局變量獲取一個(gè)隨機(jī)值,規(guī)則同上,這里就不贅述了。不同的地方是取值的方為不一樣了,因?yàn)樵谌〉玫谝粋€(gè)球之后,“red”的值已經(jīng)發(fā)生變化了(去掉了第一個(gè)球的內(nèi)容),所以“red”的長度其實(shí)已經(jīng)變化了,所以“random”的取值也要跟著變化,不然就可能越界了,取不到值了。至于為什么是這樣取值的,大家可以思考一下;
(3)“value”、“2”元件、“red”等內(nèi)容的處理跟上面的是一樣的,所以就不做過多的說明了;
(4)添加“觸發(fā)事件”到“3”元件。跟上面的添加“觸發(fā)事件”到“2”是一樣的。
3、給“3”元件添加用例
除了“random”和添加“觸發(fā)事件”到“4”元件之外,其余的同上?!皉andom”設(shè)置如下:
4、給“4”元件添加用例
除了“random”和添加“觸發(fā)事件”到“5”元件之外,其余的同上?!皉andom”設(shè)置如下:
5、給“5”元件添加用例
除了“random”和添加“觸發(fā)事件”到“6”元件之外,其余的同上。“random”設(shè)置如下:
6、給“6”元件添加用例
(1)“random”設(shè)置如下:
(2)設(shè)置“red”值為初始值。因?yàn)榈酱藭r(shí)紅色球已經(jīng)取完了,用不到“red”這個(gè)變量了,所以這里先把它設(shè)置成初始值。還記得“red”的初始值吧?如果不記得就往前面翻翻看;
(3)添加“觸發(fā)事件”到“7”元件,其他都一樣;
7、給“7”元件添加用例
(1)相同的部分就不說了哈,自行參照上面的即可;
(2)“random”值設(shè)置如下,這里為什么是這樣的?因?yàn)椤癰lue”變量的值的長度是64嘛;
(3)“value”值設(shè)置如下(看清楚了哦,這里是用的“blue”哈,不要問我為什么,不然我會(huì)打你的,因?yàn)椤?”元件存放是藍(lán)色球啊~);
(4)把藍(lán)球號(hào)碼添加到“藍(lán)球”中繼器中去;
(5)給紅色球排序。習(xí)慣性動(dòng)作,在排序之前先刪除移除所有的排序,不要糾結(jié)為什么了,習(xí)慣而已;
(6)至此,雙色球的7個(gè)號(hào)碼(6個(gè)紅色,1個(gè)藍(lán)色)都已經(jīng)取到了,那么我們想要重新抽獎(jiǎng)呢,肯定是要把“抽獎(jiǎng)”按鈕啟用啊,因?yàn)椴皇堑谝淮纬楠?jiǎng)了,所以可把“抽獎(jiǎng)”按鈕的文字內(nèi)容給重新定義一下嘛,這里就定義成“重新抽獎(jiǎng)”了;
(7)不光要把“抽獎(jiǎng)”按鈕給啟用了,還要把排序后的“紅球”中繼器和“藍(lán)球”中繼器顯示出來啊,不然怎么能算完事了呢(雙色球開獎(jiǎng)的紅色球號(hào)碼是有順序的哦);
三、預(yù)覽
忙碌了現(xiàn)在了,如果看不到成果豈不是很傷心,所以,趕緊F5一下吧,看看自己的五百萬是不是已經(jīng)在路上了。當(dāng)然,你也可以根據(jù)自己開獎(jiǎng)的號(hào)碼去福彩中心兌獎(jiǎng)的了,前提是你要去彩票站買注雙色球,而且還要中獎(jiǎng)哦,不然會(huì)被打的,到時(shí)可別怨我哈。若要真的中獎(jiǎng)了,可別忘記了我。^_^
PS:如果有什么問題,或者有什么想要實(shí)現(xiàn)的小功能,大家可以給我留言,我們一起學(xué)習(xí)!
本文由 @無淚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
哪位大神有原型啊,跟找BUG似的,找不到錯(cuò)就是不出效果
1.不懂為什么 random()*99/3,直接 *33 可以嗎?
2.中繼器設(shè)置不成功,最后也未能排序。
差評(píng) 按照你的步驟都沒錯(cuò),弄了一上午 還沒有弄成功 嗚嗚嗚~~
求詳細(xì)教程 ??
還不夠詳細(xì)? ??
好多還不明白 畢竟我是一個(gè)新人
群號(hào)多少啊?
關(guān)注了,但是一直沒有更新
公眾號(hào)里沒有原型,鼓搗半天還是出錯(cuò)
厲害厲害
厲害厲害 ??
今天干貨滿滿啊,謝謝分享
這個(gè)高級(jí)了