over 2 years ago

文章搬家囉!新文章在這裡:https://easonchang.com/2016/02/15/100sites-005-drawer/

Drawer - 簡單抽數字

Github
Live Demo

今天搬回新竹,實在沒多少時間寫程式,於是就寫了一個簡單卻實用的小抽籤程式。

目前寫出來的功能很簡單,使用者輸入最小值和最大值,點擊按鈕後就能抽到一個隨機數字。

框架上只使用到了JQuery和Bootstrap,我最愛的兩個框架。

之後有時間會加上更多功能,如:不同的抽籤模式、轉盤動畫等。

以下是程式碼:

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Drawer</title>
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="col-md-6 col-md-offset-3">
      <h1>Drawer!</h1>
      <h2>Pick One:</h2>
      <div class="form-inline">
        From <input type="number" class="form-control" id="minimum" placeholder="Minimum">
        To <input type="number" class="form-control" id="maximum" placeholder="Maximum">
        <button class="btn btn-primary" id="pickone">Pick one!</button>
        <div class="panel panel-info" id="result-panel">
          <div class="panel-body" id="result-body">
            Choose your Max and Min, I will give you a number!
          </div>
        </div>
      </div>
    </div>
  </div>


</body>
<script src="drawer.js"></script>
</html>
drawer.js
$(document).ready(function(){

  pickone_btn = $("#pickone"); 
  result_panel = $("#result-panel"); // style of result panel, used to change result panel style

  result_body = $("#result-body"); // body of result panel, used to display result

  max_fld = $("#maximum"); // maximum input field

  min_fld = $("#minimum"); // minimum input field


  pickone_btn.click(function(){
    
    var min = parseInt(min_fld.val());
    var max = parseInt(max_fld.val());

    // if the input is invalid (empty or not number)

    if(isNaN(min) || isNaN(max)) {
      result_body.html("I need both MIN and MAX!");
      // set style to danger(red)

      result_panel.addClass("panel-danger");
      result_panel.removeClass("panel-info");
      result_panel.removeClass("panel-success");
      return;
    }

    if(min > max){ 
      // interchange min & max

      var tmp = min;
      min = max;
      max = tmp;
      // interchange value of input fields

      max_fld.val(max);
      min_fld.val(min);
    }

    var result = Math.floor(Math.random()*(max-min+1) + min);
    result_body.html("You got <b>"+result+"</b> !");
    // set style to success(green)

    result_panel.addClass("panel-success");
    result_panel.removeClass("panel-info");
    result_panel.removeClass("panel-danger");
  });

});
← 【100sites #004】Firework 【100sites #006】Snack →
 
comments powered by Disqus