中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

雷迪絲and枕頭們，歡迎來到星光大道……sorry，拿錯題詞卡了，重來

（XX公司年會暨春節聯歡晚會現場）女士們，先生們，接下來就是萬眾期待、摩拳擦掌、蠢蠢欲動、心驚膽戰、激動萬分、哀號遍野……的幸運大抽獎環節……廢話不多說，請看大屏幕（下圖）……

OK，不賣關子了，想必看到這里，小伙伴們已經明白我說的這個Axure原型是個何方妖孽，竟能登上春晚（我可沒說是央視）舞臺了吧。是的，就是一款年會抽獎程序，你可千萬別把它當成是只會招搖撞騙、擺擺架子的低能原型。它是真的可以在年會現場作為抽獎系統來用的，當然年會用的功能可能要比我展示的原型復雜一些，但是只要是類似的工作原理，基本也能實現；另外如果這個抽獎原型功能上可以滿足你的需求，那么只需要替換一下抽獎數據庫（其實就是中繼器里的數據項，換成你所需要的）就可以了。

預覽地址

說到這里，先給大家奉上原型預覽地址：http://www.raedme.cn/axurelab/006_choujiang/，接下來我再和感興趣的小伙伴細細聊這原型中的子丑寅卯。

工作原理

這個抽獎程序的工作原理其實非常簡單，并且大家應該都見過類似的東西，不過在此我還是再贅述一下。

首先打開抽獎頁面，然后按下鍵盤上的任意鍵（也可設置為指定鍵）開始抽獎，此時屏幕上會快速閃現被抽獎人信息；

然后再次按下鍵盤上的任意鍵或指定鍵，抽出中獎者（此時被抽獎人的信息不再閃爍切換，而是固定顯示為中獎人信息）。這樣就完成了一輪抽獎。

如果進行下一輪抽獎的話，只需要執行相同的操作即可。但這其中會有一個過程，就是下一輪抽獎會排除掉之前的中獎者，為了防止同一個人重復中獎。

根據這個原理，我們可以明確在制作原型的過程中需要解決哪些問題，如下：

1. 被抽獎人信息如何存放
2. 如何實現被抽獎人信息的快速閃爍切換
3. 如何從被抽獎人信息中刪除中獎人信息
4. 按下鍵盤任意鍵開始/停止抽獎的邏輯判斷

帶著這些問題，我們開始原型的制作過程。

制作過程

用到的axure元件：中繼器、文本框

PART1：創建被抽獎人數據庫（中繼器）

用中繼器來存儲被抽獎人的信息，這個操作非常簡單，只需要添加一個中繼器元件，然后在中繼器中的數據集中添加相應的被抽獎人數據即可。不過本案例中被抽獎人的數據并不是一開始就存放在中繼器中，而是動態添加進去的，也就是在抽獎頁面加載的時候，向中繼器中添加數據，并且為中繼器中的數據進行排序，排序字段是一個隨機數。這樣就保證了及時向中繼器中插入數據時候是有順序的，但是中繼器一排序，就會將之前原有的順序打亂，因為對于抽獎程序，這個是必須的。

PART2：實現被抽獎人信息的快速閃爍切換（中繼器、文本框）

閃爍切換的效果通過中繼器的分頁來實現，對中繼器進行分頁，每頁顯示一項數據，也就是一條被抽獎人信息。另外由于中繼器的翻頁動作需要有觸發事件，而連續的翻頁則需要連續的觸發事件，這里我采用一種可以循環執行的事件來實現，就是通過文本框的文本改變時事件，文本框內容改變時執行一個動作，這個動作設置文本框的內容使其發生改變，這樣就形成了一個循環。

① 設置中繼器分頁

② 在文本框上設置文本改變時對中繼器翻頁的事件及動作

這里需要注意一點：當翻到最后一頁的時候，需要再使其翻到第2頁（本案例中第1也為空白頁，不參與抽獎），所以這個過程需要一個單獨的判斷，就是 Case2 的內容，當然這個是基于 Case1 的判斷條件之外的條件，也就是當中繼器中數據項的頁碼=總頁數的時候。

另外等待時間50ms用來控制閃爍切換的快慢，這個肯根據需要自行調整。

③ 如何連續觸發“文本改變時”這個事件

因為文本框顯示的是中繼器中的數據項，而中繼器中的每一條數據都是不同的，所以當中繼器翻頁的時候，就會觸發文本框上的“文本改變時”事件，也就是上述第②步的過程；但是還需要一個動作來觸發第一次，第一次之后就可以進入循環，這個動作其實就是按下鍵盤上的任意鍵，我放在后面講。

PART3：從被抽獎人信息中刪除中獎人信息（中繼器）

其實這個過程就是通過刪除中繼器中的數據項來實現的，即刪除當前抽出的中獎人數據；這個在進行刪除操作的時候需要做一個判斷，即被刪除的數據項的值等于當前顯示的中獎人的數據，這里需要用到局部變量來獲取當前顯示在文本框上的中獎人信息。

另外這個“刪除”的動作也是在按下任意鍵的時候執行，在后面要介紹按下任意鍵的邏輯的時候也會看到相應的設置。

PART4：按下鍵盤任意鍵開始/停止抽獎的邏輯判斷

按下任意鍵的場景基本可以分為三種情況：

1. 第一次開始抽獎時：Case1，此時主要是啟動抽獎程序，顯示被抽獎人信息并快速閃爍切換
2. 停止抽獎時：Case3，此時主要是停止抽獎程序，并固定顯示中間人信息
3. 第N次（N>1）抽獎時：Case2，此時是刪除Case2過程抽出的中獎人信息后，再進入下一輪抽獎

以上就是抽獎案例的主要邏輯及實現過程。

總結

本案例的核心其實是“中繼器”結合“文本框”的用法。在該案例中文本框除了用于顯示中繼器中的數據項，還有一個重要的功能就是利用“文本改變時”這一事件來實現循環，而且很多地方都可以用到這種方式。那么我的經驗就是要了解不同部件所特有的一些事件，然后加以利用，實現想要的效果。

本文由 @W.YiFAN 原創發布于人人都是產品經理?，未經許可，禁止轉載。