Aggressive Style

不定期更新となりますがよろしくお願いいたします。

【ヨドバシドットコム】ヨドバシカメラポイント計算機を作ってみた

f:id:RyuichiXP:20191013031516j:plain

ヨドバシドットコムで日用品を良く買っている。外で買いだめするのが面倒なものは、全てここの通販で買っている。そんなこんなで貯まるのがポイント。貯まったで高いものを買うとき、「結局幾らポイントが残るの?」が分からなくて困る。

と、言うわけで自分用にヨドバシのポイント計算機を作ってみた。計算ミス等があったら報告してほしい。

ヨドバシの買い物後のポイントを計算


商品の売値[円]
現在のポイント[Pt]
使用ポイント[Pt]
ポイント還元率[%]
必要経費
商品の売値[円]
使用ポイント[Pt]
必要な費用[円]
ポイントの増減
現在のポイント[Pt]
ポイント増加分[Pt]
ポイント減少分[Pt]
買い物後の残りポイント[Pt]

計算式

必要な費用[円] = 商品の売値[円] - 使用ポイント[Pt] *1[円]=1[Pt]
ポイント増加分[Pt] = (商品の売値 - 使用ポイント) * ポイント還元率
買い物後のポイント[Pt] = 現在のポイント + ポイント増加分 - 使用ポイント
*小数点以下四捨五入にて計算

プログラム

プログラムの勉強中の方向けに。フォーム入力(ホームページの書き込みを書き換える)や、入力内容のバリデーションなどの確認にどうぞ。

<script type="text/javascript">
$(function() {
  //計算ボタンが押されたとき、
    $('#calcButton').click(function() {

         //入力した値を読み込む
         Price = $('#Price').val();
         currentPoint = $('#currentPoint').val();
         usePoint = $('#usePoint').val();
         backRate = $('#backRate').val();

         //バリデーション(空欄の確認)
         if(Price == "" ||  Price == null)
         {              
                    alert("金額を入力してください。");
                    $('#Price').focus();
                    return false;
         }

         if(currentPoint == "" ||  currentPoint == null)
         {              
                    alert("現在のポイントを入力してください。");
       $('#currentPoint').focus();
                    return false;
         }

         if(usePoint == "" ||  usePoint == null)
         {              
                    alert("使用ポイントを入力してください。");
                    $('#usePoint ').focus();
                    return false;
         }

         if(backRate == "" ||  backRate == null)
         {              
                    alert("ポイント還元率を入力してください。");
                    $('#backRate').focus();
                    return false;
         }

         //バリデーション(割合の数値かどうか?)
         if(backRate.length > 2)
         {              
                    alert("ポイント還元率は1%~100%の範囲で入力してください。");
                    $('#backRate').focus();
                    return false;
         }

         //計算の為、入力した値を文字列型→数値型に変換
         Price = Number(Price);
         currentPoint = Number(currentPoint);
         usePoint = Number(usePoint);
         backRate = Number(backRate);

         //必要な費用、ポイント増加分、ポイント減少分を計算
         Cost = Price - usePoint;
         plusPoint = Math.round(Cost*(backRate/100));
         restPoint = currentPoint - usePoint + plusPoint;

         //三桁区切りにして画面に表示(toLocaleString())
        $('#Cost').text(Cost.toLocaleString());
        $('#resultSellPrice').text(Price.toLocaleString());
        $('#resultCurrentPoint').text(currentPoint.toLocaleString());
        $('#resultPlusPoint').text(plusPoint.toLocaleString());
        $('.resultMinusPoint').text("△"+usePoint.toLocaleString());
        $('#resultRestPoint').text(restPoint.toLocaleString());

    });
});
</script>

<center>
<table>
<tr>
<td style="text-align:right;">商品の売値[]</td><td><input id="Price" type="number" style="text-align:right;"></td> 
</tr>
<tr>
<td style="text-align:right;">現在のポイント[Pt]</td><td><input id="currentPoint" type="number" style="text-align:right;"></td>
</tr>
<tr>
<td style="text-align:right;">使用ポイント[Pt]</td><td><input id="usePoint" type="number" style="text-align:right;"></td> 
</tr>
<tr>
<td style="text-align:right;">ポイント還元率[%]</td><td><input id="backRate" type="number" style="text-align:right;"></td>
</tr>
<tr>
<td colspan="2"><input id='calcButton' type=button value='計算' style="width:100%;" style="text-align:right;"></td>
</tr>
<tr>
<td colspan="2">必要経費</td>
</tr>
<tr>
<td style="text-align:right;">商品の売値[]</td><td style="text-align:right;"><span id="resultSellPrice"></span></td> 
</tr>
<tr>
<td style="text-align:right;">使用ポイント[Pt]</td><td style="text-align:right;"><span class="resultMinusPoint"></span></td> 
</tr>
<tr>
<td style="text-align:right;">必要な費用[]</td><td style="text-align:right;"><span id="Cost"></span></td>
</tr>
<tr>
<td colspan="2">ポイントの増減</td>
</tr>
<tr>
<td style="text-align:right;">現在のポイント[Pt]</td><td style="text-align:right;"><span id="resultCurrentPoint"></span></td>
</tr>
<tr>
<td style="text-align:right;">ポイント増加分[Pt]</td><td style="text-align:right;"><span id="resultPlusPoint"></span></td>
</tr>
<tr>
<td style="text-align:right;">ポイント減少分[Pt]</td><td style="text-align:right;"><span class="resultMinusPoint"></span></td>
</tr>
<tr>
<td style="text-align:right;">買い物後の残りポイント[Pt]</td><td style="text-align:right;"><span id="resultRestPoint"></span></td>
</tr>
</table>
</center>

参考