正文

学会用jQuery轻松编写一个实用计算器，解决日常数学难题

/0 浏览量
0411

在日常生活中，我们经常会遇到需要计算的情况，如购物时计算总价、烹饪时换算食材比例等。学会使用jQuery编写一个实用的计算器，可以让我们在需要时快速解决这些数学难题。下面，我们就来一步步学习如何用jQuery制作一个简单的计算器。

准备工作

在开始编写计算器之前，我们需要做一些准备工作：

  1. HTML结构：设计计算器的界面，包括显示屏、按键等。
  2. CSS样式：为计算器添加样式，使其看起来美观。
  3. jQuery脚本：编写逻辑代码，实现计算器的功能。

HTML结构

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery计算器</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body>
    <div id="calculator">
        <div id="display">0</div>
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button onclick="setOperation('+')">+</button>
        <!-- ... 其他按键 ... -->
        <button onclick="calculate()">=</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="calculator.js"></script>
</body>
</html>

CSS样式

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

#calculator {
    width: 300px;
    height: 400px;
    border: 1px solid #000;
    margin: 0 auto;
    padding: 10px;
}

#display {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 24px;
    border: 1px solid #000;
    padding: 5px;
}

button {
    width: 25%;
    height: 40px;
    margin-bottom: 5px;
    font-size: 18px;
    border: 1px solid #000;
    background-color: #f0f0f0;
}

jQuery脚本

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

$(document).ready(function() {
    var currentInput = '';
    var operation = null;
    var prevInput = null;

    function appendValue(value) {
        currentInput += value;
        $('#display').text(currentInput);
    }

    function setOperation(op) {
        if (currentInput !== '') {
            if (prevInput !== null) {
                calculate();
            }
            operation = op;
            prevInput = currentInput;
            currentInput = '';
            $('#display').text(operation + ' ' + prevInput);
        }
    }

    function calculate() {
        var result;
        if (operation === '+') {
            result = parseFloat(prevInput) + parseFloat(currentInput);
        } else if (operation === '-') {
            result = parseFloat(prevInput) - parseFloat(currentInput);
        } else if (operation === '*') {
            result = parseFloat(prevInput) * parseFloat(currentInput);
        } else if (operation === '/') {
            result = parseFloat(prevInput) / parseFloat(currentInput);
        }
        $('#display').text(result);
        currentInput = result.toString();
        prevInput = null;
        operation = null;
    }

    $('#calculator button').on('click', function() {
        var value = $(this).text();
        if (value === '=') {
            calculate();
        } else if (value === '+' || value === '-' || value === '*' || value === '/') {
            setOperation(value);
        } else {
            appendValue(value);
        }
    });
});

总结

通过以上步骤，我们已经成功制作了一个简单的jQuery计算器。当然，这只是一个基础版本，你还可以根据需求添加更多功能，如支持更多运算符、自定义主题、添加历史记录等。希望这篇文章能帮助你轻松掌握使用jQuery编写计算器的方法。

-- 展开阅读全文 --