>  기사  >  웹 프론트엔드  >  JavaScript는 간단한 4가지 산술 연산을 구현합니다.

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

WBOY
WBOY원래의
2023-05-18 10:14:071560검색

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

  1. 숫자 입력

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

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

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

  1. 연산 연산자 선택

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

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

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

  1. 연산 구현

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

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

  1. 완전한 코드 샘플
<!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>
  1. 요약

위의 샘플 코드를 통해 자바스크립트는 간단한 4가지 산술연산을 쉽게 구현할 수 있다는 것을 알 수 있습니다. 실제 개발에서는 이 구현 방법을 페이지에 적용하여 사용자가 간단한 계산을 쉽게 수행할 수 있습니다.

위 내용은 JavaScript는 간단한 4가지 산술 연산을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.