Skip to content

Instantly share code, notes, and snippets.

@chrisflicker

chrisflicker/ck101 抽獎頁面 .js

Created December 27, 2012 10:34
Show Gist options
  • Save chrisflicker/4387225 to your computer and use it in GitHub Desktop.
Save chrisflicker/4387225 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisflicker created this gist Dec 27, 2012.
    215 changes: 215 additions & 0 deletions ck101 抽獎頁面 .js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,215 @@
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- Meta Tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="http://sla.ckcdn.com/css/ckLottery.css?20121227"/>
    <title>卡提諾公平隨機抽獎器</title>
    <!-- END head -->
    </head>

    <!-- BEGIN body -->
    <body class="home">
    <!-- BEGIN #header -->
    <div id="header">
    <ul class="menu">
    <li><a target="_blank" href="http://www.ck101.com" title="卡提諾論壇">卡提諾論壇</a></li>
    <li class="forum"><a target="_blank" href="http://video.ck101.com/" title="線上影音">線上影音</a></li>
    <li><a target="_blank" href="http://photo.ck101.com/" title="卡提諾畫報">卡提諾畫報</a></li>
    <li><a target="_blank" href="http://comic.ck101.com/" title="線上漫畫">線上漫畫</a></li>
    <li><a target="_blank" href="http://imgs.cc/" title="貼圖空間">貼圖空間</a></li>
    </ul>
    <ul class="ckfans">
    <li> <a title="回到卡提諾官方臉書粉絲團" href="http://ck101.com/">卡提諾官方臉書粉絲團</a></li>
    </ul>
    <!--END #header-->
    </div>

    <!--BEGIN #content -->
    <div id="content" class="clearfix">
    <div id="content-top">&nbsp;</div>
    <!--BEGIN #primary .hfeed-->
    <div id="primary" >
    <h1 class="entry-title">卡提諾公平隨機抽獎器</h1>
    <p class="explain">程式說明：本程式為開放原始碼，是一個簡單且公開的計算方式，有興趣歡迎查看HTML原始碼。<a target="_blank" href="https://gist.github.com/3204844" title="Source Link">Source Link</a></p>
    <!--BEGIN .entry-content -->
    <div class="entry-content">
    <form id="mortgagecalcalulatorform">
    <div class="info">
    <ul>
    <li>
    <label>活動名稱</label>
    <input id="title" type="text" value="官方臉書粉絲團iPhone5+iPad mini雙機組幸運抽獎活動" readonly="readonly" /><i class="iconfont" ><a href="/fb_evnent_2012_xmas/" title="鏈回活動頁">Ǔ</a></i>
    </li>
    <li>
    <label>參加人數</label>
    <input id="total" type="text" maxlength="6" placeholder="最多輸入6位數" class="explainText"/>
    </li>
    <li>
    <label>抽幾個人</label>
    <input id="num" type="text" value＝"1" />
    </li>
    <li>
    <label>由這個隨機字串計算</label>
    <input name="" id="str" type="text" /><i class="iconfont help" data-target="input-str">ä</i>
    <p>隨機字串說明：隨機的字串必須要事先公布未來要用什麼來計算隨機的方式，且主辦單位和參加者無法操控。</p>
    </li>
    <li>
    <input id="gen" class="winners" name="" type="button" value="產生得奬者"/>
    </li>
    </ul>
    </div>
    </form>
    <div class="clear"></div>
    <div class="amortizationschduleheader"id="result"></div>
    <div class="example">
    <p id="input-str"><span>本次活動將採用的隨機字串為台灣時間2012年12月31日12時00分的Yahoo!奇摩首頁新聞頭條文字，請參考下圖紅框處：</span></p>
    <p class="demo"><img src="images/demo.jpg" /></p>
    </div>
    <!--END .entry-content -->
    </div>
    </div>
    <div id="content-btm">&nbsp;</div>
    <!-- END #content -->
    </div>

    <!-- BEGIN #footer -->
    <div id="footer">
    <div id="footer-texture">
    <div id="footer-inner">
    <p>© ck101.com</p>
    </div>
    </div>
    <!-- END #footer -->
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://raw.github.com/placemarker/jQuery-MD5/master/jquery.md5.js"></script>
    <script>
    function hexdec (hex_string) {
    // Returns the decimal equivalent of the hexadecimal number
    //
    // version: 1109.2015
    // discuss at: http://phpjs.org/functions/hexdec
    // + original by: Philippe Baumann
    // * example 1: hexdec('that');
    // * returns 1: 10
    // * example 2: hexdec('a0');
    // * returns 2: 160
    hex_string = (hex_string + '').replace(/[^a-f0-9]/gi, '');
    return parseInt(hex_string, 16);
    }
    </script>
    <script>
    $(".help").click(function(){
    //console.log(id);
    var id = $(this).data('target');
    $("#"+id).animate({"left": "+=50px"}, "slow").animate({"left": "-=50px"}, "slow");
    });

    var fields = ["title", "str", "total", "num"];

    // parse hash
    var m = location.href.match(/#(.+)/);
    if(m!==null)
    {
    var qs = m[1];
    for(var i=0; i < fields.length; i++)
    {
    var id = fields[i];
    m = qs.match(new RegExp("&?" + id + "=([^&]+)"));
    if(m!==null)
    $("#" + id).val(decodeURIComponent(m[1]));

    }
    setTimeout(function(){
    $("#gen").trigger('click');
    }, 500);
    }

    $("#gen").click(function(){
    var title = $("#title").val(),
    str = $("#str").val(),
    total = $("#total").val(),
    num = $("#num").val();
    if(str=="")
    {
    alert("請輸入一個隨機字串");
    $("#str").focus();
    return;
    }
    else if(total.match(/^\d+$/)==null)
    {
    alert("請輸入參加人數");
    $("#total").focus();
    return;
    }
    else if(num.match(/^\d+$/)==null)
    {
    alert("請輸入抽幾個人");
    $("#num").focus();
    return;
    }

    num = parseInt(num);
    total = parseInt(total);

    if(num > total)
    {
    alert('人數不合理'+num+"#"+total);
    return;
    }

    var candidates = new Array();
    for(var i=1; i<= total; i++)
    {
    candidates.push(i);
    }
    //console.log(candidates.join(','));

    var result = [];
    for(var i=1; i <= num; i++)
    {
    var hash = $.md5(str + i),
    hash_num = hexdec(hash.substring(0,10)),
    rand = hash_num % candidates.length;
    //console.log((str+i) + "#" +hash,"#", hash_num,"#",rand,"#",candidates);
    result.push(
    candidates.splice( rand, 1)
    );
    }
    $("#result").html("抽中的編號是第 " + result.join(", ") + " 號");

    });

    // update permalink
    $("#" + fields.join(",#")).bind("keyup change", function(){
    var qs = [];
    for(var i=0; i< fields.length; i++)
    {
    var id = fields[i];
    var val = $("#"+id).val();
    if(val!='')
    qs.push(id + "=" + encodeURIComponent(val));

    }
    if(qs.length > 0)
    {
    qs = qs.join('&');
    $("#permalink").attr('href', location.href.split("#")[0] + "#" + qs);
    location.hash = qs;
    }
    });

    // init permalink
    $("#permalink").attr('href', location.href);

    $("#tinyurl").click(function(){
    $(this).attr('href', "http://ppt.cc/gen.php?r=1&t=1&s=" + encodeURIComponent(location.href));
    });

    </script>
    <!--END body-->
    </body>
    <!--END html-->
    </html>