<Javascript>集金のとき楽したい
なんかまた暑くなってきたな
集金とかってお釣りNG多いじゃないすか
それが１つだったらまだいいけど複数同時期に来ると端数集める(?)のに何が何枚いるとか訳わかんなくなったりするじゃないですか
それを一括で見れるようにしようって発想でコードを書きました。
ということで本編
Money Slicerの開発
Money Slicerとは
今回作成したMoney Slicerとはこんなものです
- 入力金額を各金種の必要数を計算
- 日本の通貨として一般的に流通してる紙幣・硬貨に計算可能
- 複数入力にも対応(現時点2018/8/23 15:51では3入力固定)
- 出力をカード形式でそれぞれ表示
使用している技術
今回はhtml,JavaScriptを使って実装しています。
フレームワークとして使ったのはbootstrap4です
あとはカラーデザインの参考として
saruwakakun.com
を使っています。
bootstrap4で使った機能
表示に関してcardコンポーネントを利用しました
くわしくはここを参照してもらって
getbootstrap.com
この中の"card-deck"を使って各金種の枚数を表示するようにしています。
実際のソースコード
htmlについて
htmlのソースコードです
全体ではなく、入出力に関する部分だけ書きます。
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <h2>input group</h2> <div class="input-group"> <input id="value1" style="width:300px;" placeholder="値段1"> <input id="value2" style="width:300px;" placeholder="値段2"> <input id="value3" style="width:300px;" placeholder="値段3"> <button class="btn" style="color: white;background-color: #68C5F3" onclick="slicer()">slice</button> </div> </div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> <h2>output group</h2> <div id="output_1"> </div> </div>
JavaScriptについて
JavaScriptのソースコードです。
処理内容の説明はコメントに記述してあります。
1000円~1円のところのコメントがないのは10000円、5000円と処理の内容がほぼ同じでパラメータが違うだけなので省略してます。
function slicer() { //配列pliceに入力をそれぞれ格納 var plice = [value1.value, value2.value, value3.value]; //配列totalの各要素に金種(string)と枚数(int)の配列を格納 var total = [ ["1万", 0], ["5000", 0], ["1000", 0], ["500", 0], ["100", 0], ["50", 0], ["10", 0], ["5", 0], ["1", 0] ]; //出力するコードを格納 var full_txt = " "; //入力すべてに対して処理を行う for (var i = 0; i < 3; i++) { //入力が1万円以上のときの処理 if (plice[i] >= 10000) { //入力を10000で割り、その商を整数で求める var four = Math.floor(plice[i] / 10000); //入力から10000と前式で求めた商をかけた金額を引く plice[i] = plice[i] - four * 10000; //total配列の[0][1]に1万円の枚数を追加 total[0][1] = total[0][1] + four; } //入力(もしくは1万円の処理後の金額)が5000円以上のときの処理 if (plice[i] >= 5000) { //入力から5000円を引く(5000円,500円,50円,5円は一度の会計に1枚しか使用しないようにするため) plice[i] = plice[i] - 5000; //total配列の[1][1]に5000円の枚数を1枚追加 total[1][1] = total[1][1] + 1; } if (plice[i] >= 1000) { var therd = Math.floor(plice[i] / 1000); plice[i] = plice[i] - therd * 1000; total[2][1] = total[2][1] + therd; } if (plice[i] >= 500) { plice[i] = plice[i] - 500; total[3][1] = total[3][1] + 1; } if (plice[i] >= 100) { var second = Math.floor(plice[i] / 100); plice[i] = plice[i] - second * 100; total[4][1] = total[4][1] + second; } if (plice[i] >= 50) { plice[i] = plice[i] - 50; total[5][1] = total[5][1] + 1; } if (plice[i] >= 10) { var first = Math.floor(plice[i] / 10); plice[i] = plice[i] - first * 10; total[6][1] = total[6][1] + first; } if (plice[i] >= 5) { plice[i] = plice[i] - 5; total[7][1] = total[7][1] + 1; } if (plice[i] >= 1) { var buttom = Math.floor(plice[i] / 1); total[8][1] = total[8][1] + buttom; } } //出力にcardを横並びで表示するためのソースコードを追加 full_txt = "<div class=\"card-deck\" style=\"display: flex;\" >"; //計算結果の配列の全要素について処理を行う for (var i = 0; i < 9; i++) { //使用する紙幣、硬貨の数が1以上の時に処理を実行 if (total[i][1] != 0) { //金種と枚数を記載したcardのソースコードを追加 full_txt = full_txt + "<div class=\"card\"><div class=\"card-body\"><h5 class=\"card-title\">" + total[i][0] + "円</h5><p class=\"card-text\">" + total[i][1] + "枚</p></div></div>\n"; } } //出力のdiv要素を閉じる full_txt = full_txt + "</div>"; //計算結果をhtmlに出力 output_1.innerHTML = full_txt; }
