Implementieren Sie den Taschenrechner mit jquery-Front-End-Fragen und Antworten-php.cn

Rechner ist eines der unverzichtbaren Werkzeuge im täglichen Leben der Menschen und auch eine der Funktionen, die häufig in der Webentwicklung implementiert werden müssen. In diesem Artikel verwenden wir die jQuery-Bibliothek, um einen einfachen Taschenrechner zu implementieren, der vier arithmetische Operationen und Dezimaloperationen unterstützt und Tastatureingaben verwenden kann.

Zuerst müssen wir eine HTML-Seite erstellen, um unseren Rechner zu hosten. Die HTML-Struktur ist wie folgt:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery计算器</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="calculator">
        <div class="display">
            <input type="text" id="result" readonly>
        </div>
        <div class="keys">
            <button id="clear">AC</button>
            <button id="sign">+/-</button>
            <button id="percent">%</button>
            <button class="operator" id="divide">/</button>
            <button class="number" id="seven">7</button>
            <button class="number" id="eight">8</button>
            <button class="number" id="nine">9</button>
            <button class="operator" id="multiply">*</button>
            <button class="number" id="four">4</button>
            <button class="number" id="five">5</button>
            <button class="number" id="six">6</button>
            <button class="operator" id="subtract">-</button>
            <button class="number" id="one">1</button>
            <button class="number" id="two">2</button>
            <button class="number" id="three">3</button>
            <button class="operator" id="add">+</button>
            <button class="number" id="zero">0</button>
            <button id="decimal">.</button>
            <button id="equal">=</button>
        </div>
    </div>
</body>
</html>

Nach dem Login kopieren

In dieser HTML-Struktur haben wir einen Container für einen Taschenrechner, der zwei untergeordnete Elemente hat, eines ist der Anzeigebereich und das andere ist der Tastenbereich. Der Anzeigebereich verwendet ein Eingabefeld zur Anzeige der Operationsergebnisse, während der Tastenbereich Tasten wie Zahlen und Operatoren sowie andere Sondertasten (wie Löschen, Negieren, Prozent usw.) enthält.

Als nächstes müssen wir ein CSS-Stylesheet erstellen, um unseren Rechner zu verschönern. Der CSS-Stil ist wie folgt:

body {
    font-family: Arial, sans-serif;
}

#calculator {
    margin: 0 auto;
    width: 310px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.display {
    padding: 10px;
    background-color: #f2f2f2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: right;
}

#result {
    width: 100%;
    height: 40px;
    font-size: 24px;
    border: 0;
}

.keys {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(4, 1fr);
    background-color: #efefef;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

button {
    width: 100%;
    height: 50px;
    font-size: 20px;
    border: 0;
    color: #fff;
    background-color: #4CAF50;
    cursor: pointer;
    outline: none;
}

button:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}

Nach dem Login kopieren

In diesem CSS-Stil legen wir den Gesamtstil des Rechners fest, einschließlich Rahmen, Schatten, abgerundete Ecken usw. Um die Tastaturtasten eng anzuordnen, haben wir die CSS-Grid-Layout-Technologie verwendet und den Stil der Tasten festgelegt.

Als nächstes müssen wir ein JavaScript-Skript schreiben, um die Logik des Rechners zu verwalten. Wir verwenden die jQuery-Bibliothek, um das Schreiben von Code und die DOM-Manipulation zu vereinfachen.

Wir müssen zunächst drei Variablen global definieren:

var firstNumber = '';
var operator = '';
var secondNumber = '';

Nach dem Login kopieren

Diese drei Variablen speichern jeweils die erste Zahl, den Operator und die zweite Zahl, die vom Benutzer eingegeben wurden.

Wir verwenden die Event-Handler-Funktion von jQuery, um Schlüsselereignisse zu binden. Wenn der Benutzer beispielsweise auf eine Zifferntaste klickt, fügen wir die entsprechende Nummer dem Eingabefeld im Anzeigebereich hinzu. Wenn der Benutzer auf die Plus- und Minustasten klickt, speichern wir die entsprechenden Operatoren im Variablenoperator. Wenn der Benutzer auf die Gleichheitszeichentaste klickt, führen wir die entsprechende Berechnung basierend auf dem aktuellen Operator durch und zeigen das Ergebnis im Eingabefeld an. Der spezifische Implementierungscode lautet wie folgt:

$(document).ready(function() {
    $('.number').click(function() {
        var input = $('#result').val();
        var number = $(this).text();

        // 判断当前输入框中是否已经有小数点
        if (number === '.') {
            if (input.indexOf('.') !== -1) {
                return;
            }
            if (input === '') {
                input = '0';
            }
        }

        input += number;
        $('#result').val(input);
    });

    $('.operator').click(function() {
        firstNumber = $('#result').val();
        operator = $(this).text();
        $('#result').val('');
    });

    $('#equal').click(function() {
        secondNumber = $('#result').val();
        var result = 0;
        var num1 = parseFloat(firstNumber);
        var num2 = parseFloat(secondNumber);

        switch (operator) {
            case '+':
                result = num1 + num2;
                break;
            case '-':
                result = num1 - num2;
                break;
            case '*':
                result = num1 * num2;
                break;
            case '/':
                result = num1 / num2;
                break;
        }

        $('#result').val(result);
    });

    $('#clear').click(function() {
        firstNumber = '';
        operator = '';
        secondNumber = '';
        $('#result').val('');
    });

    $('#sign').click(function() {
        var input = $('#result').val();
        var prefix = '';

        if (input.charAt(0) === '-') {
            prefix = input.substr(1);
        } else {
            prefix = '-' + input;
        }

        $('#result').val(prefix);
    });

    $('#percent').click(function() {
        var input = $('#result').val();
        var percent = parseFloat(input) / 100;
        $('#result').val(percent);
    });

    $(document).keydown(function(event) {
        var key = event.key;

        if (!isNaN(key)) {
            $('#' + key).click();
        } else if (key === '+' || key === '-' || key === '*' || key === '/') {
            $('#' + key).click();
        } else if (key === 'Enter') {
            $('#equal').click();
        } else if (key === '.') {
            $('#decimal').click();
        } else if (event.ctrlKey && (key === 'c' || key === 'C')) {
            $('#clear').click();
        }
    });
});

Nach dem Login kopieren

In diesem JavaScript-Skript verwenden wir die Ereignisverarbeitungsfunktion von jQueryclick, um Schlüsselereignisse zu binden. Wenn der Benutzer auf eine Zifferntaste klickt, lesen wir die eingegebene Zahl aus dem Wert des aktuellen Eingabefelds. Wenn es sich bei der Taste um einen Dezimalpunkt handelt, müssen wir feststellen, ob im aktuellen Eingabefeld bereits ein Dezimalpunkt vorhanden ist , ignoriere den Schlüssel. Wenn der Benutzer auf das Plus- oder Minuszeichen klickt, speichern wir die Zahl im aktuellen Eingabefeld in der Variablen „firstNumber“, speichern den Operator in der Variablen „operator“ und löschen den Inhalt des aktuellen Eingabefelds. Wenn der Benutzer auf das Gleichheitszeichen klickt, lesen wir den Wert im Eingabefeld als zweite Zahl und führen die entsprechende Berechnung basierend auf dem aktuellen Operator durch, und das Berechnungsergebnis wird im Eingabefeld angezeigt. Wenn der Benutzer auf die Löschtaste, die Umkehrtaste oder die Prozenttaste klickt, führen wir die entsprechenden Vorgänge aus. Wenn der Benutzer die entsprechende Taste auf der Tastatur drückt, simulieren wir das entsprechende Tastenklickereignis. Wenn der Benutzer beispielsweise eine Zifferntaste drückt, lösen wir das Klickereignis der entsprechenden Zifferntaste aus.

Durch die Kombination von HTML-Seite, CSS-Stylesheet und JavaScript-Skript haben wir schließlich einen einfachen Rechner implementiert. Benutzer können vier arithmetische Operationen über Maus- oder Tastaturoperationen ausführen und Dezimaloperationen und andere spezielle Operationen wie Löschen, Negieren und Prozent durchführen. Die Implementierung in diesem Artikel ist nur ein grundlegender Prototyp. Wenn Sie umfangreichere Funktionen wie unterstützende Klammern, wissenschaftliche Berechnungen usw. implementieren müssen, können Sie diese auch erweitern.

Das obige ist der detaillierte Inhalt vonImplementieren Sie den Taschenrechner mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!