正文

学会用jQuery打造实用计算器：从零开始，一步步构建交互式计算器应用

/0 浏览量
1023

在数字化时代，计算器是一个无处不在的工具。而使用jQuery，我们可以轻松地打造一个功能丰富、交互性强的计算器应用。本文将带你从零开始，一步步构建一个交互式计算器。

准备工作

在开始之前，请确保你已经安装了jQuery库。你可以从jQuery官网（https://jquery.com/）下载最新版本的jQuery库。

第一步：创建HTML结构

首先，我们需要创建计算器的HTML结构。以下是一个简单的计算器HTML示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互式计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="button" onclick="appendNumber('1')">1</button>
            <button class="button" onclick="appendNumber('2')">2</button>
            <button class="button" onclick="appendNumber('3')">3</button>
            <button class="button" onclick="calculate()">=</button>
            <button class="button" onclick="appendNumber('+')">+</button>
            <button class="button" onclick="appendNumber('-')">-</button>
            <button class="button" onclick="appendNumber('*')">*</button>
            <button class="button" onclick="appendNumber('/')">/</button>
            <button class="button" onclick="clearDisplay()">C</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

在这个HTML结构中，我们创建了一个包含显示区域和按钮区域的计算器。显示区域用于显示输入和计算结果，按钮区域包含了数字、运算符和清除按钮。

第二步：编写CSS样式

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

#calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#display {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 5px;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.button {
    width: 20%;
    height: 40px;
    margin: 5px;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}

.button:hover {
    background-color: #e0e0e0;
}

在这个CSS样式示例中，我们为计算器添加了边框、内边距、阴影等样式，并设置了按钮的宽度和高度、背景颜色等。

第三步：编写JavaScript代码

最后，我们需要编写JavaScript代码来实现计算器的功能。以下是一个简单的JavaScript代码示例：

$(document).ready(function() {
    var currentInput = '';
    var operator = '';
    var previousInput = '';

    function appendNumber(number) {
        currentInput += number;
        $('#display').val(currentInput);
    }

    function clearDisplay() {
        currentInput = '';
        previousInput = '';
        operator = '';
        $('#display').val('');
    }

    function calculate() {
        var result = 0;
        switch (operator) {
            case '+':
                result = parseFloat(previousInput) + parseFloat(currentInput);
                break;
            case '-':
                result = parseFloat(previousInput) - parseFloat(currentInput);
                break;
            case '*':
                result = parseFloat(previousInput) * parseFloat(currentInput);
                break;
            case '/':
                result = parseFloat(previousInput) / parseFloat(currentInput);
                break;
        }
        previousInput = result.toString();
        currentInput = '';
        operator = '';
        $('#display').val(previousInput);
    }
});

在这个JavaScript代码示例中，我们定义了三个函数：appendNumber用于将数字添加到当前输入，clearDisplay用于清除显示，calculate用于计算结果。

总结

通过以上步骤，我们已经成功构建了一个简单的交互式计算器应用。你可以根据自己的需求，添加更多功能，如历史记录、科学计算等。希望这篇文章对你有所帮助！

-- 展开阅读全文 --