JavaScript:Example:CountUtil
숫자 카운팅을 위한 유틸리티.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My count.js utility</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script type="text/javascript">
function onBodyLoad() {
// EMPTY.
}
function updateBox() {
document.getElementById('b1_pos').value += 100;
}
function onSaveClick() {
var content = "<tr>";
content += "<td>" + document.getElementById("l1_in_t").value + "</td>";
content += "<td>" + document.getElementById("l1_out_t").value + "</td>";
content += "<td>" + document.getElementById("l1_in_f").value + "</td>";
content += "<td>" + document.getElementById("l1_out_f").value + "</td>";
content += "<td>" + document.getElementById("l2_in_t").value + "</td>";
content += "<td>" + document.getElementById("l2_out_t").value + "</td>";
content += "<td>" + document.getElementById("l2_in_f").value + "</td>";
content += "<td>" + document.getElementById("l2_out_f").value + "</td>";
content += "<td>" + document.getElementById("l3_in_t").value + "</td>";
content += "<td>" + document.getElementById("l3_out_t").value + "</td>";
content += "<td>" + document.getElementById("l3_in_f").value + "</td>";
content += "<td>" + document.getElementById("l3_out_f").value + "</td>";
content += "<td>" + document.getElementById("l4_in_t").value + "</td>";
content += "<td>" + document.getElementById("l4_out_t").value + "</td>";
content += "<td>" + document.getElementById("l4_in_f").value + "</td>";
content += "<td>" + document.getElementById("l4_out_f").value + "</td>";
content += "</tr>";
document.getElementById("save_list").innerHTML += content;
}
function onClearClick() {
if (confirm("Clear all input?") == false) {
return false;
}
document.getElementById("l1_in_t").value = 0;
document.getElementById("l1_out_t").value = 0;
document.getElementById("l1_in_f").value = 0;
document.getElementById("l1_out_f").value = 0;
document.getElementById("l2_in_t").value = 0;
document.getElementById("l2_out_t").value = 0;
document.getElementById("l2_in_f").value = 0;
document.getElementById("l2_out_f").value = 0;
document.getElementById("l3_in_t").value = 0;
document.getElementById("l3_out_t").value = 0;
document.getElementById("l3_in_f").value = 0;
document.getElementById("l3_out_f").value = 0;
document.getElementById("l4_in_t").value = 0;
document.getElementById("l4_out_t").value = 0;
document.getElementById("l4_in_f").value = 0;
document.getElementById("l4_out_f").value = 0;
return true;
}
function add(id, value) {
document.getElementById(id).value = parseInt(document.getElementById(id).value) + value;
}
</script>
</head>
<body onload="javascript:onBodyLoad()">
<div class="container-fluid">
<div class="row">
<h1>My count.js utility</h1>
</div>
<div class="form-inline">
<div class="form-group">
<label for="l1_in_t">LEVEL1 T-IN</label>
<input type="text" class="form-control" id="l1_in_t" placeholder="IN" value="0" size="3" />
<button id="l1_in_t_up" type="button" class="btn btn-success" onclick="javascript:add('l1_in_t', +1);">UP</button>
<button id="l1_in_t_down" type="button" class="btn btn-success" onclick="javascript:add('l1_in_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l1_out_t">T-OUT</label>
<input type="text" class="form-control" id="l1_out_t" placeholder="OUT" value="0" size="3" />
<button id="l1_out_t_up" type="button" class="btn btn-success" onclick="javascript:add('l1_out_t', +1);">UP</button>
<button id="l1_out_t_down" type="button" class="btn btn-success" onclick="javascript:add('l1_out_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l1_in_f">F-IN</label>
<input type="text" class="form-control" id="l1_in_f" placeholder="IN" value="0" size="3" />
<button id="l1_in_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l1_in_f', +1);">UP</button>
<button id="l1_in_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l1_in_f', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l1_out_f">F-OUT</label>
<input type="text" class="form-control" id="l1_out_f" placeholder="OUT" value="0" size="3" />
<button id="l1_out_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l1_out_f', +1);">UP</button>
<button id="l1_out_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l1_out_f', -1);">DOWN</button>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="l2_in_t">LEVEL2 T-IN</label>
<input type="text" class="form-control" id="l2_in_t" placeholder="IN" value="0" size="3" />
<button id="l2_in_t_up" type="button" class="btn btn-success" onclick="javascript:add('l2_in_t', +1);">UP</button>
<button id="l2_in_t_down" type="button" class="btn btn-success" onclick="javascript:add('l2_in_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l2_out_t">T-OUT</label>
<input type="text" class="form-control" id="l2_out_t" placeholder="OUT" value="0" size="3" />
<button id="l2_out_t_up" type="button" class="btn btn-success" onclick="javascript:add('l2_out_t', +1);">UP</button>
<button id="l2_out_t_down" type="button" class="btn btn-success" onclick="javascript:add('l2_out_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l2_in_f">F-IN</label>
<input type="text" class="form-control" id="l2_in_f" placeholder="IN" value="0" size="3" />
<button id="l2_in_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l2_in_f', +1);">UP</button>
<button id="l2_in_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l2_in_f', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l2_out_f">F-OUT</label>
<input type="text" class="form-control" id="l2_out_f" placeholder="OUT" value="0" size="3" />
<button id="l2_out_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l2_out_f', +1);">UP</button>
<button id="l2_out_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l2_out_f', -1);">DOWN</button>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="l3_in_t">LEVEL3 T-IN</label>
<input type="text" class="form-control" id="l3_in_t" placeholder="IN" value="0" size="3" />
<button id="l3_in_t_up" type="button" class="btn btn-success" onclick="javascript:add('l3_in_t', +1);">UP</button>
<button id="l3_in_t_down" type="button" class="btn btn-success" onclick="javascript:add('l3_in_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l3_out_t">T-OUT</label>
<input type="text" class="form-control" id="l3_out_t" placeholder="OUT" value="0" size="3" />
<button id="l3_out_t_up" type="button" class="btn btn-success" onclick="javascript:add('l3_out_t', +1);">UP</button>
<button id="l3_out_t_down" type="button" class="btn btn-success" onclick="javascript:add('l3_out_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l3_in_f">F-IN</label>
<input type="text" class="form-control" id="l3_in_f" placeholder="IN" value="0" size="3" />
<button id="l3_in_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l3_in_f', +1);">UP</button>
<button id="l3_in_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l3_in_f', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l3_out_f">F-OUT</label>
<input type="text" class="form-control" id="l3_out_f" placeholder="OUT" value="0" size="3" />
<button id="l3_out_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l3_out_f', +1);">UP</button>
<button id="l3_out_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l3_out_f', -1);">DOWN</button>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="l4_in_t">LEVEL4 T-IN</label>
<input type="text" class="form-control" id="l4_in_t" placeholder="IN" value="0" size="3" />
<button id="l4_in_t_up" type="button" class="btn btn-success" onclick="javascript:add('l4_in_t', +1);">UP</button>
<button id="l4_in_t_down" type="button" class="btn btn-success" onclick="javascript:add('l4_in_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l4_out_t">T-OUT</label>
<input type="text" class="form-control" id="l4_out_t" placeholder="OUT" value="0" size="3" />
<button id="l4_out_t_up" type="button" class="btn btn-success" onclick="javascript:add('l4_out_t', +1);">UP</button>
<button id="l4_out_t_down" type="button" class="btn btn-success" onclick="javascript:add('l4_out_t', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l4_in_f">F-IN</label>
<input type="text" class="form-control" id="l4_in_f" placeholder="IN" value="0" size="3" />
<button id="l4_in_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l4_in_f', +1);">UP</button>
<button id="l4_in_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l4_in_f', -1);">DOWN</button>
</div>
<div class="form-group">
<label for="l4_out_f">F-OUT</label>
<input type="text" class="form-control" id="l4_out_f" placeholder="OUT" value="0" size="3" />
<button id="l4_out_f_up" type="button" class="btn btn-danger" onclick="javascript:add('l4_out_f', +1);">UP</button>
<button id="l4_out_f_down" type="button" class="btn btn-danger" onclick="javascript:add('l4_out_f', -1);">DOWN</button>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<button id="update" type="button" class="btn btn-submit" onclick="javascript:onSaveClick()">SAVE</button>
<button id="clear" type="button" class="btn btn-submit" onclick="javascript:onClearClick()">CLEAR</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>B1/T-IN</th><th>B1/T-OUT</th><th>B1/F-IN</th><th>B1/F-OUT</th>
<th>F1/T-IN</th><th>F1/T-OUT</th><th>F1/F-IN</th><th>F1/F-OUT</th>
<th>F2/T-IN</th><th>F2/T-OUT</th><th>F2/F-IN</th><th>F2/F-OUT</th>
<th>F3/T-IN</th><th>F3/T-OUT</th><th>F3/F-IN</th><th>F3/F-OUT</th>
</tr>
</thead>
<tbody id="save_list">
</tbody>
</table>
</div>
<div class="row">
<h4>TextArea</h4>
<textarea class="form-control" id="text_memo" rows="10" wrap="logical" placeholder="MEMO BOX"></textarea>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>