正文

制作一个简单的jQuery计算器：轻松学会编写，实现加减乘除功能

/0 浏览量
1027

在本文中，我们将一起学习如何使用jQuery制作一个简单的计算器，该计算器能够实现基本的加减乘除运算。通过以下步骤，你将能够掌握如何编写HTML、CSS和JavaScript代码，以创建一个具有用户友好界面的计算器。

1. 准备工作

在开始之前，请确保你的电脑上已经安装了jQuery库。你可以从官方jQuery网站下载最新版本的jQuery库。

2. 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 class="calculator">
        <input type="text" id="display" disabled>
        <div class="keys">
            <button class="btn" value="1">1</button>
            <button class="btn" value="2">2</button>
            <button class="btn" value="3">3</button>
            <button class="btn" value="+">+</button>
            <button class="btn" value="4">4</button>
            <button class="btn" value="5">5</button>
            <button class="btn" value="6">6</button>
            <button class="btn" value="-">-</button>
            <button class="btn" value="7">7</button>
            <button class="btn" value="8">8</button>
            <button class="btn" value="9">9</button>
            <button class="btn" value="*">*</button>
            <button class="btn" value="C">C</button>
            <button class="btn" value="0">0</button>
            <button class="btn" value="=">=</button>
            <button class="btn" value="/">/</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个包含输入框和按钮的calculator容器。每个按钮代表一个数字或运算符。

3. CSS样式

接下来，我们需要为计算器添加一些样式。以下是一个简单的CSS样式文件styles.css：

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

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

.keys button {
    width: 22%;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}

.keys button:hover {
    background-color: #f0f0f0;
}

在上面的CSS代码中，我们为计算器添加了一些基本样式，包括背景颜色、边框、内边距和按钮样式。

4. jQuery脚本

现在，我们来编写jQuery脚本，实现计算器的功能。以下是一个简单的JavaScript文件script.js：

$(document).ready(function() {
    $('.btn').click(function() {
        var buttonValue = $(this).val();
        if (buttonValue === '=') {
            $('#display').val(eval($('#display').val()));
        } else if (buttonValue === 'C') {
            $('#display').val('');
        } else {
            $('#display').val($('#display').val() + buttonValue);
        }
    });
});

在上面的脚本中，我们为每个按钮添加了一个点击事件监听器。当按钮被点击时，我们根据按钮的值来更新显示框的值。如果按钮的值是等于号（=），则执行计算；如果按钮的值是清除按钮（C），则清空显示框；否则，将按钮的值追加到显示框中。

5. 总结

通过以上步骤，我们成功创建了一个简单的jQuery计算器。这个计算器可以完成基本的加减乘除运算，并且具有一个简洁的界面。你可以根据自己的需求，进一步扩展和优化这个计算器。希望这篇文章能够帮助你更好地理解jQuery在网页开发中的应用。

-- 展开阅读全文 --