javascript實作簡單的四則運算-前端問答-PHP中文網

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="请输入第二个数字">

登入後複製

這樣就可以在頁面上輸入兩個數字。

運算運算子的選擇

四則運算有加、減、乘、除四種運算符，需要在頁面上提供一個選擇框，供使用者選擇想要進行的操作符。可以使用HTML中的select標籤來實作。

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

登入後複製

這樣就可以在頁面上選擇四種運算子之一。

運算的實作

在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>

登入後複製