JavaScript는 간단한 4가지 산술 연산을 구현합니다.-프런트엔드 Q&A-php.cn

JavaScript는 간단한 4가지 산술 연산을 구현합니다.

WBOY

풀어 주다： 2023-05-18 10:14:07

원래의

1580명이 탐색했습니다.

Javascript는 프런트엔드 개발에 널리 사용되는 프로그래밍 언어로, 스크립팅 언어라고도 합니다. 간단한 4가지 산술 연산을 포함하여 많은 기능을 구현할 수 있습니다. 이 기사에서는 자바스크립트를 사용하여 간단한 4가지 산술 연산을 구현하는 방법을 소개합니다.

숫자 입력

4가지 산술 연산을 수행하려면 먼저 숫자를 입력해야 합니다. HTML의 입력 태그를 사용하여 숫자를 입력할 수 있습니다. 예:

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

로그인 후 복사

이렇게 하면 페이지에 두 개의 숫자를 입력할 수 있습니다.

연산 연산자 선택

4가지 산술 연산에는 덧셈, 뺄셈, 곱셈, 나눗셈이 포함됩니다. 사용자가 수행하려는 연산자를 선택할 수 있도록 페이지에 선택 상자가 제공되어야 합니다. 이는 HTML의 select 태그를 사용하여 수행할 수 있습니다.

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

로그인 후 복사

페이지에서 4개의 연산자 중 하나를 선택할 수 있습니다.

연산 구현

JavaScript에서는 기본적인 수학 함수를 사용하여 4가지 산술 연산을 구현할 수 있습니다. 덧셈은 + 연산자, 뺄셈은 - 연산자, 곱셈은 * 연산자, 나눗셈은 / 연산자를 사용합니다. 따라서 코드는 다음과 같이 작성할 수 있습니다.

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

로그인 후 복사

이 코드는 먼저 페이지의 숫자와 연산자를 얻은 다음 스위치 문을 사용하여 특정 작업을 수행합니다. 마지막으로 결과가 페이지에 표시됩니다.

완전한 코드 샘플

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

로그인 후 복사