Axure8.0實例 | 隨機雙色球,開講了
福彩雙色球,大部分朋友對此并不陌生吧,相信買過的朋友或多或少都對此有所研究,今天我們一起來用Axure8.0模擬做一個雙色的開獎過程。今天使用的主要知識點有,全局變量的使用,中繼器的增刪以及排序。
預覽:
一、元件準備
1、添加兩個中繼器,分別用來存放雙色的紅球和藍球,取名為“紅球”和“藍球”,初始時隱藏;
- 分別在中繼器中放入一個橢圓形的元件,其中把放入“紅球”中繼器的橢圓形元件的邊框設置成紅色,字體也設置成紅色;放入“藍球”中繼器的橢圓形元件的邊框設置成藍色,字體也設置成藍色;并分別給這兩個橢圓形元件命名為“紅球中獎號碼”和“藍球中獎號碼”;
- 設置“紅球”中繼器的布局樣式為水平,并勾選“網格排布”,設置“每排項目數”為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()截?。?/p>
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”元件之外,其余的同上?!皉andom”設置如下:
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:如果有什么問題,或者有什么想要實現的小功能,大家可以給我留言,我們一起學習!
本文由 @無淚 原創發布于人人都是產品經理。未經許可,禁止轉載。
哪位大神有原型啊,跟找BUG似的,找不到錯就是不出效果
1.不懂為什么 random()*99/3,直接 *33 可以嗎?
2.中繼器設置不成功,最后也未能排序。
差評 按照你的步驟都沒錯,弄了一上午 還沒有弄成功 嗚嗚嗚~~
求詳細教程 ??
還不夠詳細? ??
好多還不明白 畢竟我是一個新人
群號多少???
關注了,但是一直沒有更新
公眾號里沒有原型,鼓搗半天還是出錯
厲害厲害
厲害厲害 ??
今天干貨滿滿啊,謝謝分享
這個高級了