chrisflicker/ck101 抽獎頁面 .js

## ck101 抽獎頁面 .js
<!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>
	<!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"> </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"> </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>