正文

学会用jQuery轻松实现计算器键盘输入功能

/0 浏览量
0823

在网页开发中，实现一个计算器键盘输入功能是一个常见的需求。jQuery库提供了丰富的选择器和事件处理功能，可以帮助我们轻松实现这一功能。本文将详细讲解如何使用jQuery来创建一个具有键盘输入功能的计算器。

基础HTML结构

首先，我们需要一个基础的HTML结构来展示计算器的界面。以下是一个简单的计算器HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery计算器</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="calculator">
    <input type="text" id="display" disabled>
    <button class="number" value="1">1</button>
    <button class="number" value="2">2</button>
    <button class="number" value="3">3</button>
    <button class="operator" value="+">+</button>
    <!-- ... 其他按钮 ... -->
    <button id="equals" value="=">=</button>
</div>
<script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们需要为计算器添加一些基本的CSS样式。以下是一个简单的样式表示例：

#calculator {
    width: 200px;
    margin: 20px auto;
}

#display {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

.number, .operator {
    width: 20%;
    padding: 10px;
    margin: 5px;
}

#equals {
    width: 40%;
    padding: 10px;
    margin-top: 10px;
}

jQuery脚本

最后，我们需要编写jQuery脚本来实现键盘输入功能。以下是一个简单的脚本示例：

$(document).ready(function() {
    // 监听数字和操作符按钮点击事件
    $('.number, .operator').click(function() {
        var value = $(this).val();
        var display = $('#display').val();
        $('#display').val(display + value);
    });

    // 监听等号按钮点击事件
    $('#equals').click(function() {
        var display = $('#display').val();
        try {
            var result = eval(display);
            $('#display').val(result);
        } catch (e) {
            $('#display').val('Error');
        }
    });

    // 监听键盘事件
    $(document).keydown(function(e) {
        var key = String.fromCharCode(e.which);
        var display = $('#display').val();

        // 处理数字键
        if (/\d/.test(key)) {
            $('#display').val(display + key);
        }
        // 处理操作符键
        else if (key === '+' || key === '-' || key === '*' || key === '/') {
            $('#display').val(display + key);
        }
        // 处理等号键
        else if (key === '=') {
            try {
                var result = eval(display);
                $('#display').val(result);
            } catch (e) {
                $('#display').val('Error');
            }
        }
        // 处理退格键
        else if (key === 'Backspace') {
            $('#display').val(display.substring(0, display.length - 1));
        }
    });
});

以上代码中，我们首先监听了数字和操作符按钮的点击事件，将按钮的值添加到显示区域。然后，我们监听了等号按钮的点击事件，使用eval函数计算显示区域中的表达式，并将结果更新到显示区域。最后，我们监听了键盘事件，根据按下的键执行相应的操作。

通过以上步骤，我们就成功使用jQuery实现了一个具有键盘输入功能的计算器。在实际应用中，您可以根据需求添加更多功能，如错误处理、自定义样式等。

-- 展开阅读全文 --