Drawer - 簡單抽數字
今天搬回新竹，實在沒多少時間寫程式，於是就寫了一個簡單卻實用的小抽籤程式。
目前寫出來的功能很簡單，使用者輸入最小值和最大值，點擊按鈕後就能抽到一個隨機數字。
框架上只使用到了JQuery和Bootstrap，我最愛的兩個框架。
之後有時間會加上更多功能，如：不同的抽籤模式、轉盤動畫等。
以下是程式碼：
<!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>$(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");
});
});