Wie implementiert man eine einfache Taschenrechnerfunktion mit JavaScript?-js-Tutorial-php.cn

Wie implementiert man eine einfache Taschenrechnerfunktion mit JavaScript?

王林

Freigeben： 2023-10-27 14:51:42

Original

1300 Leute haben es durchsucht

如何使用 JavaScript 实现一个简单的计算器功能？

Wie verwende ich JavaScript, um eine einfache Taschenrechnerfunktion zu implementieren?

Der Taschenrechner ist eines der am häufigsten verwendeten Werkzeuge in unserem täglichen Leben. Er kann zur Durchführung einfacher mathematischer Operationen verwendet werden. Heute werden wir eine einfache Taschenrechnerfunktion mit JavaScript implementieren. In diesem Artikel zeige ich Ihnen, wie Sie mit JavaScript Code schreiben, um grundlegende mathematische Operationen und eine Rechnerschnittstelle zu implementieren.

Zuerst müssen wir eine HTML-Datei erstellen, die ein Textfeld, Ziffernschaltflächen und Bedienschaltflächen enthält, um die Ergebnisse des Vorgangs anzuzeigen. Das Folgende ist die grundlegende HTML-Struktur:

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        /* 样式可以根据个人喜好进行自定义 */
    </style>
</head>
<body>
    <input type="text" id="result" readonly>
    <br>
    <button onclick="buttonClick('1')">1</button>
    <button onclick="buttonClick('2')">2</button>
    <button onclick="buttonClick('3')">3</button>
    <button onclick="buttonClick('+')">+</button>
    <br>
    <button onclick="buttonClick('4')">4</button>
    <button onclick="buttonClick('5')">5</button>
    <button onclick="buttonClick('6')">6</button>
    <button onclick="buttonClick('-')">-</button>
    <br>
    <button onclick="buttonClick('7')">7</button>
    <button onclick="buttonClick('8')">8</button>
    <button onclick="buttonClick('9')">9</button>
    <button onclick="buttonClick('*')">*</button>
    <br>
    <button onclick="buttonClick('0')">0</button>
    <button onclick="buttonClick('.')">.</button>
    <button onclick="buttonClick('=')">=</button>
    <button onclick="buttonClick('/')">/</button>
    <br>
    <button onclick="clearResult()">清空</button>
</body>
</html>

Nach dem Login kopieren

Im obigen HTML-Code verwenden wir ein Textfeld (ID ist „Ergebnis“), um das Ergebnis der Operation anzuzeigen, und fügen eine Zahlenschaltfläche, eine Operatorschaltfläche und eine Löschschaltfläche hinzu. Jede Schaltfläche verfügt über ein Onclick-Ereignis, das eine JavaScript-Funktion namens buttonClick aufruft, um Schaltflächenklickereignisse zu verarbeiten. buttonClick 的 JavaScript 函数，用来处理按钮点击事件。

接下来，我们需要在 JavaScript 文件中编写 buttonClick 和 clearResult 函数的实现。以下是示例代码：

function buttonClick(value) {
    var result = document.getElementById("result");

    if (value === '=') {
        result.value = eval(result.value); // 使用 eval 函数计算表达式
    } else {
        result.value += value;
    }
}

function clearResult() {
    document.getElementById("result").value = "";
}

Nach dem Login kopieren

在 buttonClick 函数中，我们首先通过 getElementById 方法获取到文本框的引用，然后根据按钮的值进行不同的处理。如果按钮的值是等于号（=），我们将使用 eval 函数来计算表达式，并将结果显示在文本框中。否则，我们将按钮的值追加到文本框的内容后面。

clearResult

Als nächstes müssen wir die Implementierung der Funktionen buttonClick und clearResult in eine JavaScript-Datei schreiben. Das Folgende ist der Beispielcode:

rrreee

In der Funktion buttonClick erhalten wir zunächst den Verweis auf das Textfeld über die Methode getElementById und führen dann basierend darauf unterschiedliche Verarbeitungen durch der Wert der Schaltfläche. Wenn der Wert der Schaltfläche das Gleichheitszeichen (=) ist, verwenden wir die Funktion eval, um den Ausdruck auszuwerten und das Ergebnis im Textfeld anzuzeigen. Andernfalls hängen wir den Wert der Schaltfläche an den Inhalt des Textfelds an.

clearResult-Funktion setzt einfach den Wert des Textfelds auf eine leere Zeichenfolge und realisiert so die Löschfunktion.

Jetzt können Sie den obigen HTML-Code und JavaScript-Code in den entsprechenden Dateien speichern und die HTML-Datei im Browser öffnen. Sie sehen eine einfache Taschenrechneroberfläche, mit der Sie grundlegende mathematische Operationen ausführen können. 🎜🎜Dies ist nur ein einfaches Taschenrechnerbeispiel, das nur die grundlegenden vier Rechenfunktionen implementiert. Wenn Sie komplexere Taschenrechnerfunktionen implementieren möchten, z. B. unterstützende Klammern, trigonometrische Funktionen usw., müssen Sie den Code weiter verbessern. Anhand dieses Beispiels können Sie jedoch sehen, wie Sie mit JavaScript eine einfache Taschenrechnerfunktion implementieren. 🎜🎜Ich hoffe, dieser Artikel kann Ihnen helfen und wünsche Ihnen viel Spaß beim Programmieren! 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man eine einfache Taschenrechnerfunktion mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!