23
2月
2021
2021
原価計算機を作りました
売値から原価を計算したり、原価から利益率（粗利率）を計算し売値を出したりなど、Javascript（jQuery）を使用すれば簡単に計算できます。
雑に作っていますが、ただの計算機なのでこれぐらいでいいのでは。表示上は面倒なので他の計算結果も表示されてしまいますが、重要なのは下記3点の計算ができます。
計算はフォーカスアウトで自動的に計算。
（１）クライアントから予算が決まっていて、予算に合わせて原価を出す場合は、売値と粗利率を入力すると原価が計算されます。
（２）予算が特に決まっていなくてとりあえず見積もりを出してくれという場合は、原価と粗利率を入力すると予算（売値）が計算されます。
（３）クライアントからの要望が増えてきて原価が上がってきている場合は、売値と原価を入力すると粗利率が計算されます。
| 計算 | ||
|---|---|---|
| 売値 | ||
| 原価 | ||
| 粗利率 |
index.html
<h1>原価計算</h1>
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>計算</th>
</tr>
<tr>
<td>1</td>
<td>売値</td>
<td><input type="text" name="sel" id="sel"></td>
<td></td>
<td class="selCal"></td>
</tr>
<tr>
<td>2</td>
<td>原価</td>
<td><input type="text" name="cost" id="cost"></td>
<td></td>
<td class="costCal"></td>
</tr>
<tr>
<td>3</td>
<td>粗利</td>
<td></td>
<td></td>
<td class="gProfitCal"></td>
</tr>
<tr>
<td>4</td>
<td>粗利率</td>
<td><input type="text" name="gProfitPer" id="gProfitPer" placeholder="%"></td>
<td></td>
<td class="gProfitPerCal"></td>
</tr>
</table>
<script src="js/jquery.cal.js"></script>
jquery.cal.js
$(window).on('load', function(){
$('#sel').on('change', function(){
//原価計算
var sel = $('#sel').val();
var cost = $('#cost').val();
var gProfitPer = $('#gProfitPer').val() / 100;
var cal = Math.ceil(sel * (1 - gProfitPer));
$('.costCal').text(cal.toLocaleString());
$('.gProfitPerCal').text(Math.ceil(100 * (1 - (cost / sel))) + '%');
});
$('#cost').on('change', function(){
//売値計算
var sel = $('#sel').val();
var cost = $('#cost').val();
var gProfitPer = $('#gProfitPer').val() / 100;
var cal = Math.ceil(cost / (1 - gProfitPer));
$('.selCal').text(cal.toLocaleString());
$('.gProfitPerCal').text(Math.ceil(100 * (1 - (cost / sel))) + '%');
});
$('#gProfitPer').on('change', function(){
//粗利率
var sel = $('#sel').val();
var cost = $('#cost').val();
var gProfitPer = $('#gProfitPer').val() / 100;
var calSel = Math.ceil(cost / (1 - gProfitPer));
var calCost = Math.ceil(sel * (1 - gProfitPer));
$('.selCal').text(calSel.toLocaleString());
$('.costCal').text(calCost.toLocaleString());
});
});