JavaScript implements simple four arithmetic operations-Front-end Q&A-php.cn

JavaScript implements simple four arithmetic operations

WBOY

Release： 2023-05-18 10:14:07

Original

1580 people have browsed it

Javascript is a programming language widely used in front-end development, also known as a scripting language. It can implement many functions, including simple four arithmetic operations. This article will introduce how to use javascript to implement simple four arithmetic operations.

Number input

To perform the four arithmetic operations, you first need to enter numbers. You can use the input tag in HTML to enter numbers. For example:

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

Copy after login

This will allow you to enter two numbers on the page.

Selection of operation operators

The four arithmetic operations include addition, subtraction, multiplication and division. A selection box needs to be provided on the page for users to choose. The operator you want to perform. This can be achieved using the select tag in HTML.

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

Copy after login

This allows you to select one of four operators on the page.

Implementation of operations

In JavaScript, you can use basic mathematical functions to implement the four arithmetic operations. Addition uses the operator, subtraction uses the - operator, multiplication uses the * operator, and division uses the / operator. Therefore, the code can be written as follows:

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;
}

Copy after login

This code first obtains the numbers and operators on the page, and then uses the switch statement to perform specific operations. Finally the results are displayed on the page.

Sample complete code

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

Copy after login

Summary

Through the above sample code, we can see that javascript can be very convenient Implement simple four arithmetic functions. In actual development, this implementation method can be applied to the page to facilitate users to perform simple calculations.

The above is the detailed content of JavaScript implements simple four arithmetic operations. For more information, please follow other related articles on the PHP Chinese website!