正文

轻松打造简易jQuery计算器小程序，学编程从基础做起

/0 浏览量
0718

在开始编程之旅时，制作一个简易的计算器是一个很好的实践项目。这不仅可以帮助你巩固HTML、CSS和jQuery的基础知识，还能让你学会如何将它们结合起来创建一个实用的应用。下面，我们将一步一步地教你如何制作一个简单的jQuery计算器小程序。

准备工作

在开始之前，确保你已经安装了以下工具：

  • HTML: 用于构建网页结构。
  • CSS: 用于美化网页样式。
  • jQuery: 一个快速、小巧且功能丰富的JavaScript库。

你可以从官方jQuery网站下载jQuery库。

第一步：创建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>
            <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="setOperation('+')">+</button>
        </div>
        <div>
            <button class="button" onclick="appendNumber('4')">4</button>
            <button class="button" onclick="appendNumber('5')">5</button>
            <button class="button" onclick="appendNumber('6')">6</button>
            <button class="button" onclick="setOperation('-')">-</button>
        </div>
        <div>
            <button class="button" onclick="appendNumber('7')">7</button>
            <button class="button" onclick="appendNumber('8')">8</button>
            <button class="button" onclick="appendNumber('9')">9</button>
            <button class="button" onclick="setOperation('*')">*</button>
        </div>
        <div>
            <button class="button" onclick="appendNumber('0')">0</button>
            <button class="button" onclick="appendEqual()">=</button>
            <button class="button" onclick="clearDisplay()">C</button>
            <button class="button" onclick="setOperation('/')">/</button>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

这里我们创建了一个div元素作为计算器的容器，并在其中放置了一个input元素用于显示计算结果。我们为每个数字和运算符创建了一个button元素，并为它们添加了onclick事件处理器，以便在点击时调用JavaScript函数。

第二步：编写CSS样式

CSS用于美化我们的计算器。创建一个名为styles.css的文件，并添加以下样式：

body {
    font-family: Arial, sans-serif;
}

#calculator {
    width: 300px;
    margin: 50px auto;
}

.button {
    width: 75px;
    height: 50px;
    font-size: 24px;
    margin: 5px;
}

#display {
    width: 100%;
    height: 50px;
    text-align: right;
    font-size: 24px;
}

这些样式会给计算器一个基本的布局和外观。

第三步：编写jQuery脚本

最后一步是编写JavaScript脚本来处理计算逻辑。创建一个名为script.js的文件，并添加以下代码：

let currentNumber = '';
let previousNumber = '';
let operation = null;

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

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

function appendEqual() {
    if (currentNumber === '') return;
    if (previousNumber !== '') calculate();
    updateDisplay();
}

function clearDisplay() {
    currentNumber = '';
    previousNumber = '';
    operation = null;
    updateDisplay();
}

function calculate() {
    let result;
    const prev = parseFloat(previousNumber);
    const current = parseFloat(currentNumber);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('除数不能为0');
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    currentNumber = result.toString();
    operation = null;
    previousNumber = '';
    updateDisplay();
}

function updateDisplay() {
    $('#display').val(currentNumber);
}

这段代码定义了几个函数来处理数字的添加、运算符的设置、等号的计算、显示的更新以及显示的清除。calculate函数负责执行实际的计算，而updateDisplay函数则用于更新屏幕显示。

总结

通过以上步骤，你已经成功创建了一个简易的jQuery计算器小程序。这个小程序不仅可以帮助你复习和巩固HTML、CSS和jQuery的知识，还可以激发你对编程的兴趣。当你掌握了这些基础技能后，你就可以开始尝试制作更加复杂的Web应用了。编程的旅程充满乐趣，希望你能够在其中找到自己的兴趣所在。

-- 展开阅读全文 --