JavaScriptは単純な四則演算を実装します-フロントエンドQ&A-php.cn

JavaScriptは単純な四則演算を実装します

WBOY

リリース： 2023-05-18 10:14:07

オリジナル

1604 人が閲覧しました

JavaScript は、フロントエンド開発で広く使用されているプログラミング言語であり、スクリプト言語としても知られています。単純な四則演算を含む多くの機能を実装できます。この記事ではJavaScriptを使って簡単な四則演算を実装する方法を紹介します。

数値入力

四則演算を行うには、まず数値を入力する必要があります。 HTML の input タグを使用して数値を入力できます。例:

<input type="number" id="num1" placeholder="请输入第一个数字">
<input type="number" id="num2" placeholder="请输入第二个数字">

ログイン後にコピー

これにより、ページに 2 つの数字を入力できるようになります。

演算子の選択

四則演算には加算、減算、乗算、除算が含まれます。ユーザーが選択できるようにページ上に選択ボックスを設ける必要があります。実行するオペレーター。これは、HTML の select タグを使用して実現できます。

<select id="operator">
  <option value="+">加</option>
  <option value="-">减</option>
  <option value="*">乘</option>
  <option value="/">除</option>
</select>

ログイン後にコピー

これにより、ページ上の 4 つの演算子から 1 つを選択できます。

演算の実装

JavaScript では、基本的な数学関数を使用して四則演算を実装できます。加算には演算子が使用され、減算には - 演算子が使用され、乗算には * 演算子が使用され、除算には / 演算子が使用されます。したがって、コードは次のように記述できます。

function calculate() {
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var operator = document.getElementById('operator').value;
  var result;

  switch (operator) {
    case '+':
      result = parseFloat(num1) + parseFloat(num2);
      break;
    case '-':
      result = parseFloat(num1) - parseFloat(num2);
      break;
    case '*':
      result = parseFloat(num1) * parseFloat(num2);
      break;
    case '/':
      result = parseFloat(num1) / parseFloat(num2);
      break;
    default:
      result = '请选择操作符';
  }

  document.getElementById('result').value = result;
}

ログイン後にコピー

このコードは、まずページ上の数値と演算子を取得し、次に switch ステートメントを使用して特定の操作を実行します。最後に結果がページに表示されます。

サンプル完全なコード

<!DOCTYPE html>
<html>

<head>
  <title>Javascript四则运算示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Javascript四则运算示例</h1>
  <p>输入两个数字，选择一个操作符，点击计算按钮进行运算</p>
  <input type="number" id="num1" placeholder="请输入第一个数字">
  <input type="number" id="num2" placeholder="请输入第二个数字">
  <select id="operator">
    <option value="+">加</option>
    <option value="-">减</option>
    <option value="*">乘</option>
    <option value="/">除</option>
  </select>
  <button onclick="calculate()">计算</button>
  <input type="text" id="result" readonly>

  <script>
    function calculate() {
      var num1 = document.getElementById('num1').value;
      var num2 = document.getElementById('num2').value;
      var operator = document.getElementById('operator').value;
      var result;

      switch (operator) {
        case '+':
          result = parseFloat(num1) + parseFloat(num2);
          break;
        case '-':
          result = parseFloat(num1) - parseFloat(num2);
          break;
        case '*':
          result = parseFloat(num1) * parseFloat(num2);
          break;
        case '/':
          result = parseFloat(num1) / parseFloat(num2);
          break;
        default:
          result = '请选择操作符';
      }

      document.getElementById('result').value = result;
    }
  </script>

</body>

</html>

ログイン後にコピー