JavaScript - 消費税の計算

公開日：2018-12-14 更新日：2020-10-18

1. 概要

入力された金額と消費税率から、消費税と合計金額を計算して、画面に表示します。

入力値は、document.getElementById() でタグのオブジェクトを取得して、value プロパティで取得します。

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body style="padding:0px; margin:0px;">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <div style="float:left; padding:20px; padding-top:50px;">
    <div id="main" style="width:100px; height:300px; background-color:lightgray; color:black;">
      ここでマウスを動かしてください。
    </div>
  </div>
  
  <div style="float:left; padding-top:50px;">
    <div>screen:<span id="msg1"></span></div>
    <div>client:<span id="msg2"></span></div>
    <div>page  :<span id="msg3"></span></div>
    <div>offset:<span id="msg4"></span></div>
    <div>ボタン           :<span id="msg5"></span></div>
  </div>
  <div style="clear:both"></div>
  <script>

    //ログ出力
    function showLog(e) {
      $("#msg1").html(e.screenX + ",&nbsp;" + e.screenY); //スクリーン
      $("#msg2").html(e.clientX + ",&nbsp;" + e.clientY); //ブラウザ
      $("#msg3").html(e.pageX   + ",&nbsp;" + e.pageY);   //Webページ
      $("#msg4").html(e.offsetX + ",&nbsp;" + e.offsetY); //要素
      $("#msg5").html(e.which); //1 左クリック  3:右クリック
    }

    //イベント
    $("#main").on("mousedown", function(e) {
      showLog(e);
    });

    $("#main").on("mouseup", function(e) {
      showLog(e);
    });

    $("#main").on("mousemove", function(e) {
      showLog(e);
    });

  </script>
</body></html>

実行結果：画面



Tag

New Article