線上幸運抽獎(Lucky draw)

繼上次的線上賓果產生器( https://diary.tw/archives/1185 )後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.

網址: 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, 如下:

function editSelect(e, dialogtitle, readonly){
  var textContent = "";
  $("#"+e.id+" option").each(function(a, opt){
    textContent += $(opt).text() + "\n";
  });
  $("#v").val(textContent);
  
  if(readonly){
    $("#dialogbox").dialog({
      height: 340,
      width: 450,
      modal: true,
      title: dialogtitle,
      buttons: {
        "OK":function(){
          $(this).dialog("close");
        }
      }
    });   
  }else{
    $("#dialogbox").dialog({
    height: 340,
    width: 450,
    modal: true,
    title: dialogtitle,
    buttons: {
      "SAVE":function(){
        var ary = $("#v").val().split("\n");
        $("#"+e.id+" option").remove();
        for(i=0;i<ary.length;i++){
          if(ary[i]!=""){
            $("#"+e.id).append(new Option(ary[i], ary[i], true, true));
          }
        }
        $(this).dialog("close");
        }
      }
    });
  }
}

同樣是 editSelect, 一樣是將資料寫一份到 #v 中(dialog裡的 textarea), 不過會因為 readonly 參數而生出 readonly 為 true 時, 僅有 ok 鈕(不能編輯), 而 readonly 不為 true 時, 會有 save 鈕, 可以存回原來的 select, 這樣便能共用這個 editSelect function.

當然, 應用的方式很多啦, 抽獎名單放人名, 獎項也放人名, 就可以玩配對遊戲, 可以自行想出許多不同的變化!

快去玩看看吧: http://sample.diary.tw/lucky-draw/