正文

轻松学会用jQuery打造简易连续计算器，快速掌握编程技巧

/0 浏览量
1023

在编程的世界里，掌握一些实用的技巧总能让你的工作变得更加轻松愉快。今天，我们就来学习如何使用jQuery打造一个简易的连续计算器。通过这个例子，你不仅能够学会如何使用jQuery进行DOM操作，还能体会到编程的乐趣。

准备工作

在开始之前，请确保你的电脑上已经安装了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>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="appendOperation('+')">+</button>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="appendOperation('-')">-</button>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="appendOperation('*')">*</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendOperation('/')">/</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

在这个结构中，我们创建了一个名为calculator的div元素，其中包含一个文本输入框display用于显示计算结果，以及一些按钮用于输入数字和运算符。

编写CSS样式

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

#calculator {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#calculator button {
    width: 30px;
    height: 30px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}

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

在这个样式表中，我们设置了计算器的宽度、边距、内边距、边框和圆角。同时，我们还设置了按钮的宽度、高度、边距、边框、圆角和背景颜色。

编写JavaScript代码

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

$(document).ready(function() {
    var currentInput = '';
    var currentOperation = '';
    var previousInput = '';
    var result = 0;

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

    function appendOperation(operation) {
        if (currentInput === '') {
            return;
        }
        if (currentOperation !== '') {
            calculate();
        }
        currentOperation = operation;
        previousInput = currentInput;
        currentInput = '';
        $('#display').val(currentInput);
    }

    function calculate() {
        result = eval(previousInput + currentOperation + currentInput);
        $('#display').val(result);
        currentInput = result.toString();
        currentOperation = '';
    }

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

在这个代码中，我们定义了四个函数：appendNumber、appendOperation、calculate和clearDisplay。这些函数分别用于处理数字输入、运算符输入、计算结果和清除显示。

  • appendNumber函数用于将数字添加到当前输入中，并更新显示。
  • appendOperation函数用于添加运算符，并处理连续运算符的情况。
  • calculate函数用于计算结果，并更新显示。
  • clearDisplay函数用于清除显示，并重置所有变量。

总结

通过以上步骤，我们成功地使用jQuery打造了一个简易的连续计算器。这个例子展示了如何使用jQuery进行DOM操作、事件处理和简单的数学计算。希望这个例子能够帮助你快速掌握编程技巧，为你的编程之路增添更多乐趣。

-- 展开阅读全文 --