正文

学会用jQuery打造简易计算器：轻松实现按钮功能与计算操作

/0 浏览量
0529

在这个数字化时代，计算器已经成为我们日常生活中不可或缺的工具。而使用jQuery来打造一个简易的计算器，不仅能提升用户体验，还能锻炼我们的编程技能。本文将带你一步步学会如何使用jQuery实现一个简易计算器的按钮功能与计算操作。

一、准备工作

在开始之前，我们需要准备以下内容：

  1. HTML：用于构建计算器的界面。
  2. CSS：用于美化计算器的样式。
  3. jQuery库：用于简化JavaScript操作。

二、HTML结构

首先，我们需要创建一个HTML文件，用于构建计算器的界面。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="btn" data-value="1">1</button>
            <button class="btn" data-value="2">2</button>
            <button class="btn" data-value="3">3</button>
            <button class="btn" data-value="+">+</button>
            <button class="btn" data-value="4">4</button>
            <button class="btn" data-value="5">5</button>
            <button class="btn" data-value="6">6</button>
            <button class="btn" data-value="-">-</button>
            <button class="btn" data-value="7">7</button>
            <button class="btn" data-value="8">8</button>
            <button class="btn" data-value="9">9</button>
            <button class="btn" data-value="*">*</button>
            <button class="btn" data-value="C">C</button>
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn" data-value="="/></button>
            <button class="btn" data-value="=">=</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

三、CSS样式

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
}

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

.btn {
    width: 25%;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    font-size: 18px;
    cursor: pointer;
}

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

四、jQuery脚本

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

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

    $('.btn').click(function() {
        var value = $(this).data('value');

        if (value === 'C') {
            currentInput = '';
        } else if (value === '=') {
            try {
                var result = eval(currentInput);
                currentInput = result.toString();
            } catch (error) {
                currentInput = 'Error';
            }
        } else {
            currentInput += value;
        }

        $('#display').val(currentInput);
    });
});

五、总结

通过以上步骤，我们已经成功地使用jQuery实现了一个简易计算器的按钮功能与计算操作。这个计算器虽然功能简单，但可以帮助我们更好地理解jQuery的基本用法。在实际应用中，我们可以根据需求进一步完善和扩展这个计算器。

-- 展开阅读全文 --