線上幸運抽獎(Lucky draw)

程式技術/Javascript 2012/03/20 12:10
views: 400153 times
繼上次的線上賓果產生器(http://diary.tw/tim/990)後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.

網址: http://sample.diary.tw/lucky-draw/

一樣是使用 jQuery, 純 client 執行的程式, 不過這次多配合了 jQuery UI 中的 dialog, 以方便快速編輯 html 中的 select 物件.

工作方式很簡單, 第一動是先輸入流水號, 例如預設的 1~100, 按下產生後, 生成 1~100 號在抽獎名單中, 若有跳號或是不規則號, 都可以藉由雙擊抽獎名單的 select 元件進行編輯, 利用 textarea 進行編輯, 一行一項, 空行會自行避開, 自行貼入或編輯清單.

再來就是輸入獎項了, 一般應該是由小到大排(通常的抽獎順序啦), 當然也可以隨興輸入, 一樣雙擊獎項的 select 會跳出編輯的 dialog.

最後就是令人期待的抽獎了, 抽獎鈕按下時, 若在獎項有被選取的項目, 會先抽該項目的得獎者, 若沒有則從最上面的獎項開始抽起. 每次抽都會隨機排序抽獎名單中的號碼, 所以很隨機, 抽出來的獎項及得獎者會填入最下方的抽獎結果.

隨時都可以再加入獎項(直接再進行編輯即可), 例如加碼, 紅包等, 再繼續抽獎, 而最後的抽獎結果是可以雙擊跳出 dialog 中有 textarea 供複製出來應用, 不過是不能編輯的(才不會被修改), 這樣就完成了這個線上幸運抽獎.

其中編輯 select 及列出 select 內容的 function 是共用的, 都是將其 dblclick 呼叫 editSelect, 如下:

more..



top

Trackback Address :: http://diary.tw/tim/trackback/991

Write a comment


PREV : [1] : ... [71] : [72] : [73] : [74] : [75] : [76] : [77] : [78] : [79] : ... [382] : NEXT



Sapido 精巧型網卡、無線網卡、無線分享三享機(BRD70n) EPSON LW-600P智慧型藍牙手寫標籤機 [每日好康] HP LJ  P1102w 無線雷射黑迷你黑白印表機 美國 VORNADO 533 渦流空氣循環機 (黑色) HTC One M8 16G 5吋四核心全新旗艦機 飛利浦組合式 DVD / USB超迷你音響MCD130 ASUS ZenFone 5 A501 5吋雙卡雙待智慧手機 InfoThink Micro USB X USB 雙頭讀卡機 【TIAYA】3G WIFI 分享器 SAMSUNG WB350F 21倍光學變焦超廣角數位相機(公司貨) LG Pocket photo 3.0 Hello Kitty 口袋相印機- (全球限量版) 【PAFERS】XSPIN-藍芽運動裝置 35合1掌上型麻將機2代 Canon PowerShot N 內建WiFi多角度掀背螢幕輕巧機 (公司貨) msi 微星 Enjoy 71 7吋雙核IPS平板(AML8726-MX) WD Elements  1TB USB 3.0 2.5吋外接式硬碟 Verbatim 威寶 OTG 16GB microUSB+USB3.0 雙介面高速隨身碟 (限時限量)SanDisk Ultra 32G microSDHC C10記憶卡 SanDisk 32GB Mobile Ultra microSDHC  超值組 SanDisk 32GB Ultra U1 microSDHC 附轉卡(平輸) SanDisk Extreme UHS-I 32GB記憶卡 公司貨 45MB/秒 PENTAX WG-3  F2.0大光圈防水相機組(公司貨) Transmission Micro USB OTG多功能讀卡機 Nikon S2700 6倍光學26mm超廣角數位相機(公司貨) LG Pocket photo 第二代 2.0口 袋相印機-優雅粉 Canon SELPHY CP900 內建Wi-Fi熱昇華印相機(公司貨) HP LJ P1102w 無線雷射黑迷你黑白印表機 HP LaserJet Pro CP1025nw 無線迷你彩色雷射印表機 ZyXEL合勤 電力線傳輸設備PLA4201(雙包裝) SAMSUNG WB150F 18倍變焦超廣角WIFI類單眼(平輸中文) FUJIFILM XP100 防水防震防寒防震多重防護相機(平輸中文) HTC New htc One 4.7吋四核旗艦機 - 32G 版 TOSHIBA 1TB USB3.0 2.5吋行動硬碟 瑞旭VIZIO 42吋WUSH連網系列120Hz LED液晶顯示器+視訊盒(V42E) DigiFU_Android 4.2 雲端網路電視盒 (DB550) apple MD199TA/A-APPLE TV 每朝健康 黃金燕麥茶-無糖(550mlx24入) 御茶園 每朝健康烏龍茶(650mlx24入) 御茶園 每朝健康綠茶(650mlx24入)


 Waiting...