利用jquery實作計算器-前端問答-PHP中文網

利用jquery實作計算器

WBOY

發布： 2023-05-14 09:38:36

原創

898 人瀏覽過

計算器是人們日常生活中不可或缺的工具之一，也是Web開發中經常需要實現的功能之一。在本文中，我們將透過利用jQuery庫來實現一個簡單的計算器，該計算器支援四則運算以及小數運算，並且可以使用鍵盤輸入。

首先，我們需要建立一個HTML頁面來承載我們的計算器。 HTML結構如下：

<!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>

登入後複製

在這個HTML結構中，我們有一個計算器的容器，其中有兩個子元素，一個是顯示區域，另一個是按鍵區域。顯示區域使用一個輸入框來顯示運算結果，而按鍵區域則包含了數字、運算子等按鍵，以及其他特殊按鍵（例如清除、取反、百分比等）。

接下來，我們需要建立一個CSS樣式表來美化我們的計算器。 CSS樣式如下：

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

登入後複製

在這個CSS樣式中，我們設定了計算器的整體樣式，包括邊框、陰影、圓角等。為了讓鍵盤按鍵可以緊密排列，我們使用了CSS網格佈局技術，並設定了按鍵的樣式。

接下來，我們需要寫一個JavaScript腳本來處理計算機的邏輯。我們使用jQuery函式庫來簡化處理程式碼的編寫和DOM操作。

我們先要全域定義三個變數：

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

登入後複製

這三個變數將分別儲存使用者輸入的第一個數、運算子和第二個數。

我們使用jQuery的事件處理函數來綁定按鍵事件。例如，當使用者點擊數字鍵時，我們將相應的數字新增到顯示區域的輸入框中。當使用者點擊加號和減號鍵時，我們將對應的運算子儲存到變數operator中。當使用者點擊等號鍵時，我們根據目前運算子來執行對應的計算並將結果顯示到輸入框中。具體實作程式碼如下：

$(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();
        }
    });
});

登入後複製

在這個JavaScript腳本中，我們使用了jQuery的事件處理函數click來綁定按鍵事件。當使用者點擊數字鍵時，我們從目前輸入框的值中讀取已輸入的數字，而如果按鍵是小數點時，我們需要判斷目前輸入框中是否已經存在小數點，如果存在則忽略該按鍵。當使用者點擊加號或減號時，我們將目前輸入框中的數儲存到變數firstNumber中，並將運算子儲存到變數operator中，並清空目前輸入方塊。當使用者點擊等號時，我們讀取輸入框中的值作為第二個數，並根據當前運算符來執行相應的計算，計算結果將顯示在輸入框中。當使用者點選清除鍵、取反鍵或百分比鍵時，我們分別執行對應的操作。當使用者按下鍵盤上的對應按鍵時，我們會模擬對應的按鍵點擊事件。例如，當使用者按下數字鍵時，我們將觸發對應數字鍵的點擊事件。

最終，透過HTML頁面、CSS樣式表和JavaScript腳本的結合，我們實作了一個簡單的計算器。使用者可以透過滑鼠或鍵盤操作來完成四則運算，並且可以進行小數運算以及其他特殊操作，例如清除、取反和百分比等。本文中的實作只是一個基礎的原型，如果你需要實現更豐富的功能，例如支援括號、科學計算等，也可以在此基礎上進行擴展。

以上是利用jquery實作計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！