Heim > Artikel > Web-Frontend > JavaScript implementiert einfache vier arithmetische Operationen

JavaScript implementiert einfache vier arithmetische Operationen

WBOYOriginal: 2023-05-18 10:14:071514Durchsuche

Javascript ist eine Programmiersprache, die häufig in der Front-End-Entwicklung verwendet wird und auch als Skriptsprache bekannt ist. Es kann viele Funktionen implementieren, einschließlich einfacher vier arithmetischer Operationen. In diesem Artikel wird erläutert, wie Sie mit Javascript einfache vier arithmetische Operationen implementieren.

Zahleneingabe

Um vier Rechenoperationen durchzuführen, müssen Sie zunächst Zahlen eingeben. Sie können das Eingabe-Tag in HTML verwenden, um Zahlen einzugeben. Zum Beispiel:

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

Damit können Sie zwei Zahlen auf der Seite eingeben.

Auswahl der Operationsoperatoren

Zu den vier arithmetischen Operationen gehören Addition, Subtraktion, Multiplikation und Division. Auf der Seite muss ein Auswahlfeld bereitgestellt werden, damit der Benutzer den Operator auswählen kann, den er ausführen möchte. Dies kann mithilfe des Select-Tags in HTML erreicht werden.

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

Damit können Sie einen von vier Operatoren auf der Seite auswählen.

Implementierung von Operationen

In JavaScript können Sie grundlegende mathematische Funktionen verwenden, um die vier arithmetischen Operationen zu implementieren. Bei der Addition wird der Operator „+“ verwendet, bei der Subtraktion der Operator „-“, bei der Multiplikation der Operator „*“ und bei der Division der Operator „/“. Daher kann der Code wie folgt geschrieben werden:

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

Dieser Code ruft zunächst die Zahlen und Operatoren auf der Seite ab und verwendet dann die Switch-Anweisung, um bestimmte Vorgänge auszuführen. Abschließend werden die Ergebnisse auf der Seite angezeigt.

Beispielvollständiger 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>

Zusammenfassung

Anhand des obigen Beispielcodes können wir sehen, dass Javascript einfache vier arithmetische Operationen problemlos implementieren kann. In der tatsächlichen Entwicklung kann diese Implementierungsmethode auf die Seite angewendet werden, um Benutzern die Durchführung einfacher Berechnungen zu erleichtern.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert einfache vier arithmetische Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Warum kann die VUE-Aufnahme auf dem Xiaomi Mi 8-Telefon nicht aktiviert werden?Nächster Artikel：Warum kann die VUE-Aufnahme auf dem Xiaomi Mi 8-Telefon nicht aktiviert werden?

In Verbindung stehende Artikel

Mehr sehen