正文

“打造简易计算器：跟着jQuery教程一步步学会编写基础计算功能”

/0 浏览量
1108

在数字化时代，计算器是一个不可或缺的工具。而使用jQuery编写一个简易计算器，不仅可以加深你对jQuery的理解，还能让你体验到编程的乐趣。本文将带你一步步学会如何使用jQuery编写一个基础的计算器。

第一步：HTML结构搭建

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperation('+')">+</button>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="setOperation('-')">-</button>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="setOperation('*')">*</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="setOperation('/')">/</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

第二步：CSS样式美化

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

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

#calculator input {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 24px;
}

#calculator button {
    width: 22%;
    height: 40px;
    margin-right: 2%;
    font-size: 18px;
    cursor: pointer;
}

#calculator button:last-child {
    margin-right: 0;
}

第三步：JavaScript功能实现

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

let currentInput = '';
let previousInput = '';
let operation = null;

function appendNumber(number) {
    currentInput += number;
    updateDisplay();
}

function setOperation(op) {
    if (currentInput === '') return;
    if (previousInput !== '') calculate();
    operation = op;
    previousInput = currentInput;
    currentInput = '';
    updateDisplay();
}

function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operation = null;
    updateDisplay();
}

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operation = null;
    previousInput = '';
    updateDisplay();
}

function updateDisplay() {
    document.getElementById('display').value = currentInput;
}

通过以上步骤，你已经成功打造了一个简易的计算器。当然，这只是一个基础版本，你可以根据自己的需求进行扩展和优化。希望这篇文章能帮助你更好地理解jQuery的使用，并激发你对编程的兴趣。

-- 展开阅读全文 --