Erstellen Sie einen Online-Rechner mit JavaScript-js-Tutorial-php.cn

Erstellen Sie einen Online-Rechner mit JavaScript

WBOY

Freigeben： 2023-08-09 15:46:49

Original

1427 Leute haben es durchsucht

Erstellen Sie einen Online-Rechner mit JavaScript

Verwenden Sie JavaScript, um Online-Rechner zu erstellen

Mit der Entwicklung des Internets erscheinen immer mehr Tools und Anwendungen in Online-Form. Unter diesen ist der Taschenrechner eines der am häufigsten verwendeten Werkzeuge. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript einen einfachen Online-Rechner erstellen, und es werden Codebeispiele bereitgestellt.

Bevor wir beginnen, müssen wir über grundlegende HTML- und CSS-Kenntnisse verfügen. Die Rechneroberfläche kann mithilfe von HTML-Tabellenelementen erstellt und anschließend mithilfe von CSS gestaltet werden. Das Folgende ist ein HTML-Codebeispiel für eine einfache Rechneroberfläche:

<!DOCTYPE html>
<html>
<head>
    <title>在线计算器</title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
    <div class="calculator">
        <table>
            <tr>
                <td colspan="4"><input type="text" id="result" disabled></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(7)">7</button></td>
                <td><button onclick="appendNumber(8)">8</button></td>
                <td><button onclick="appendNumber(9)">9</button></td>
                <td><button onclick="appendOperator('+')">+</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(4)">4</button></td>
                <td><button onclick="appendNumber(5)">5</button></td>
                <td><button onclick="appendNumber(6)">6</button></td>
                <td><button onclick="appendOperator('-')">-</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(1)">1</button></td>
                <td><button onclick="appendNumber(2)">2</button></td>
                <td><button onclick="appendNumber(3)">3</button></td>
                <td><button onclick="appendOperator('*')">*</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(0)">0</button></td>
                <td><button onclick="appendOperator('.')">.</button></td>
                <td><button onclick="calculate()">=</button></td>
                <td><button onclick="appendOperator('/')">/</button></td>
            </tr>
        </table>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel wird ein Textfeld mit der ID „result“ verwendet, um die Berechnungsergebnisse anzuzeigen. Anschließend wurde mithilfe von Tabellen-Tags und Schaltflächen-Tags eine einfache Rechnerschnittstelle erstellt. Auf jeder Schaltfläche wird ein Onclick-Ereignis verwendet, um die entsprechende Aktion auszulösen.

Als nächstes müssen wir JavaScript-Code schreiben, um die Logik des Rechners zu implementieren. Das Folgende ist ein Beispiel für JavaScript-Code, der zur Steuerung des Rechnerbetriebs verwendet wird:

var expression = ""; // 保存用户输入的表达式

// 追加数字
function appendNumber(num) {
    expression += num;
    document.getElementById("result").value = expression;
}

// 追加运算符
function appendOperator(operator) {
    expression += operator;
    document.getElementById("result").value = expression;
}

// 进行计算
function calculate() {
    try {
        var result = eval(expression);
        document.getElementById("result").value = result;
        expression = result;
    } catch (error) {
        // 处理错误情况
        document.getElementById("result").value = "错误";
        expression = "";
    }
}

Nach dem Login kopieren

Im obigen Code sind drei Funktionen definiert: appendNumber、appendOperator和calculate。appendNumber函数用于追加数字到表达式中；appendOperator函数用于追加运算符到表达式中；calculateDie Funktion wird verwendet, um Berechnungen durchzuführen und die Ergebnisse anzuzeigen.

Schließlich müssen wir CSS verwenden, um die Rechneroberfläche zu gestalten. Das Folgende ist ein einfaches CSS-Codebeispiel:

.calculator {
    margin: 50px auto;
    width: 200px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

button {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
}

Nach dem Login kopieren

Im obigen CSS-Code werden einige grundlegende Stile verwendet, um die Rechneroberfläche zu verschönern.

Mit dem obigen Codebeispiel können wir einen einfachen Online-Rechner erstellen. Benutzer können Zahlen und Operatoren eingeben, indem sie auf Schaltflächen klicken, und der Rechner führt automatisch die entsprechenden Berechnungen durch und zeigt die Ergebnisse an. Dieser Rechner kann für einfache mathematische Operationen wie Addition, Subtraktion, Multiplikation, Division und Dezimaloperationen verwendet werden.

Zusammenfassend lässt sich sagen, dass es möglich ist, einen Online-Rechner über JavaScript zu schreiben. Wir müssen lediglich HTML zum Erstellen der Schnittstelle und CSS für das Design verwenden und dann JavaScript verwenden, um die Logik des Rechners zu implementieren. Ich hoffe, dass der Inhalt dieses Artikels für Sie hilfreich ist, und wünsche Ihnen viel Glück beim Erstellen eines Online-Rechners mit JavaScript!

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Online-Rechner mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!