首頁 > 文章 > web前端 > javascript實作簡單的四則運算

javascript實作簡單的四則運算

WBOY原創: 2023-05-18 10:14:071513瀏覽

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>

總結

#透過上述範例程式碼，我們可以看出，javascript可以非常方便地實作簡單的四則運算功能。在實際開發中，可以將此實作方式應用於頁面中，方便使用者進行簡單的計算。

以上是javascript實作簡單的四則運算的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：小米8手機為什麼打不開VUE拍攝下一篇：小米8手機為什麼打不開VUE拍攝

看更多