利用jquery实现计算器-前端问答-PHP中文网

利用jquery实现计算器

WBOY

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

原创

899 人浏览过

计算器是人们日常生活中不可或缺的工具之一，也是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中文网其他相关文章！