jquery做一个计算机

原创

mob64ca12e20c7d 2024-09-05 04:20:30 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e20c7d的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 制作一个简单的计算器

制作一个简单的计算器是学习 jQuery 的一个很好的项目。这不仅能帮助你熟悉 jQuery 的基本用法，还能让你理解前端开发的基础概念。接下来，我将为你详细讲解整个过程，并提供所需的代码示例。

项目流程

首先，我们需要明确整个项目的步骤，以下是创建计算器的流程：

步骤	描述
1	创建 HTML 结构
2	添加 CSS 样式
3	引入 jQuery 库
4	编写 JavaScript 逻辑
5	测试和调试

具体步骤

步骤 1: 创建 HTML 结构

首先，我们需要一个简单的 HTML 文件结构，用于显示计算器的基本界面。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入 CSS 文件 -->
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled> <!-- 显示计算结果 -->
        <div class="buttons">
            <button class="btn">7</button>
            <button class="btn">8</button>
            <button class="btn">9</button>
            <button class="btn">/</button>
            <button class="btn">4</button>
            <button class="btn">5</button>
            <button class="btn">6</button>
            <button class="btn">*</button>
            <button class="btn">1</button>
            <button class="btn">2</button>
            <button class="btn">3</button>
            <button class="btn">-</button>
            <button class="btn">0</button>
            <button class="btn">C</button>
            <button class="btn">=</button>
            <button class="btn">+</button>
        </div>
    </div>

    <script src=" <!-- 引入 jQuery -->
    <script src="script.js"></script> <!-- 引入 JavaScript 文件 -->
</body>
</html>

步骤 2: 添加 CSS 样式

接着，我们为我们的计算器添加一些 CSS 样式，以提高其外观。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

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

#display {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 2rem;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.btn {
    padding: 20px;
    font-size: 1.5rem;
    cursor: pointer;
}

步骤 3: 引入 jQuery 库

在 HTML 文件中，我们已经通过 CDN 引入了 jQuery 库。确保在 <body> 标签底部引入，以提高页面加载速度。

步骤 4: 编写 JavaScript 逻辑

现在是最重要的部分，我们来编写计算器的逻辑。

$(document).ready(function() {
    let input = ''; // 存储输入的字符串
    
    // 点击按钮事件
    $('.btn').click(function() {
        const value = $(this).text(); // 获取按钮内容
        
        // 处理不同按钮
        if (value === 'C') {
            input = ''; // 清除输入
            $('#display').val(input); // 更新显示
        } else if (value === '=') {
            try {
                input = eval（input); // 计算结果
                $('#display').val(input); // 显示结果
            } catch (error) {
                $('#display').val('错误'); // 错误处理
            }
        } else {
            input += value; // 添加输入值
            $('#display').val(input); // 更新显示
        }
    });
});