正文

轻松掌握jQuery，打造实用简单计算器教程

/0 浏览量
0813

在网页设计中，计算器是一个非常实用的功能，它可以提供便捷的计算服务，增强用户体验。而jQuery，作为一款流行的JavaScript库，可以极大地简化HTML文档遍历、事件处理、动画和AJAX操作。今天，我们就来学习如何使用jQuery制作一个实用且简单的计算器。

准备工作

在开始之前，请确保您的电脑上已经安装了以下软件：

创建HTML结构

首先，我们需要创建计算器的HTML结构。以下是一个简单的计算器示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button onclick="appendValue('+')">+</button>
        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button onclick="appendValue('-')">-</button>
        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button onclick="appendValue('*')">*</button>
        <button onclick="appendValue('C')">C</button>
        <button onclick="appendValue('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="appendValue('/')">/</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

在这个例子中，我们创建了一个名为calculator的div容器，并在其中添加了一个文本输入框和多个按钮。文本输入框用于显示计算结果，按钮则用于输入数字和运算符。

添加CSS样式

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

#calculator {
    width: 300px;
    margin: 50px auto;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 5px #ccc;
}

#calculator button {
    width: 30px;
    height: 30px;
    margin: 5px;
    cursor: pointer;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
}

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

编写jQuery脚本

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

$(document).ready(function() {
    var display = $('#display');
    var expression = '';

    function appendValue(value) {
        expression += value;
        display.val(expression);
    }

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

    $('#calculator button').on('click', function() {
        var value = $(this).text();
        if (value === 'C') {
            display.val('');
            expression = '';
        } else {
            appendValue(value);
        }
    });
});

在这个脚本中，我们定义了appendValue和calculate两个函数。appendValue函数用于将按钮上的值追加到表达式中，并更新显示结果。calculate函数则用于计算表达式的值，并更新显示结果。

通过以上步骤，我们成功制作了一个简单实用的计算器。当然，这个例子只是一个基础版本，您可以根据自己的需求进行扩展和优化。希望这篇文章对您有所帮助！

-- 展开阅读全文 --