正文

学会用jQuery轻松打造HTML动态计算器，步骤详解！

/0 浏览量
0819

在这个数字化时代，掌握一些基本的网页编程技能，比如使用jQuery制作一个动态计算器，不仅能提升个人的技术能力，还能在日常生活中解决一些实际问题。下面，我们就来一步步教你如何用jQuery打造一个简单的HTML动态计算器。

准备工作

在开始之前，你需要以下准备工作：

  1. HTML结构：定义计算器的布局。
  2. CSS样式：美化计算器的界面。
  3. JavaScript（jQuery）：实现计算器的功能。

第一步：HTML结构

首先，我们需要创建计算器的HTML结构。以下是一个基本的计算器布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery动态计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <div class="row">
            <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 operator" onclick="setOperator('+')">+</button>
        </div>
        <div class="row">
            <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 operator" onclick="setOperator('-')">-</button>
        </div>
        <!-- 更多行和按钮 -->
        <button class="button" onclick="calculate()">=</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

第二步：CSS样式

接下来，我们需要为计算器添加一些基本的样式。创建一个名为styles.css的文件，并添加以下内容：

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

.button {
    width: 25%;
    padding: 10px;
    margin: 5px;
    border: none;
    background-color: #f2f2f2;
    border-radius: 3px;
    cursor: pointer;
}

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

.operator {
    background-color: #4CAF50;
    color: white;
}

#display {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

第三步：jQuery实现功能

最后，我们需要用jQuery来实现计算器的功能。创建一个名为script.js的文件，并添加以下内容：

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

function setOperator(operator) {
    if ($('#display').val() !== '') {
        var currentOperator = $('#display').val().slice(-1);
        if (currentOperator !== '+' && currentOperator !== '-' && currentOperator !== '*' && currentOperator !== '/') {
            $('#display').val($('#display').val() + operator);
        }
    }
}

function calculate() {
    var expression = $('#display').val();
    try {
        var result = eval(expression);
        $('#display').val(result);
    } catch (error) {
        $('#display').val('Error');
    }
}

这样，我们就完成了一个简单的HTML动态计算器的制作。你可以根据自己的需求，添加更多功能和样式。记住，实践是提高技能的最佳途径，不断尝试和修改，你会越来越熟练。

-- 展开阅读全文 --