使用 jQuery 设计和实现计算器(1)

📌 相关文章

📜 使用 jQuery 设计和实现计算器(1)

📅 最后修改于: 2023-12-03 15:36:31.201000 🧑 作者: Mango

使用 jQuery 设计和实现计算器

在本文中，我们将介绍如何使用 jQuery 框架来设计和实现一个简单的计算器应用程序。通过这个例子，你将学习到如何使用 jQuery 操作 DOM 元素、事件处理程序、以及使用 jQuery 中的函数等重要的知识点。

效果预览

首先，让我们来看看最终实现的计算器应用程序长什么样：

calculator demo

可以看到，我们的计算器应用程序具有以下功能：

支持数字和运算符输入
支持计算结果的显示
支持清空和删除功能

HTML 结构

在编写 JavaScript 前，我们需要先编写 HTML 结构。以下是我们使用的 HTML 结构：

<!DOCTYPE html>
<html>
  <head>
    <title>Calculator</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="calculator">
      <label id="result" class="result"></label>
      <div class="keys">
        <button class="key" data-key="1">1</button>
        <button class="key" data-key="2">2</button>
        <button class="key" data-key="3">3</button>
        <button class="key operator" data-operator="+">+</button>
        <button class="key" data-key="4">4</button>
        <button class="key" data-key="5">5</button>
        <button class="key" data-key="6">6</button>
        <button class="key operator" data-operator="-">-</button>
        <button class="key" data-key="7">7</button>
        <button class="key" data-key="8">8</button>
        <button class="key" data-key="9">9</button>
        <button class="key operator" data-operator="*">*</button>
        <button class="key" data-key=".">.</button>
        <button class="key" data-key="0">0</button>
        <button class="key" id="clear">C</button>
        <button class="key operator" data-operator="/">/</button>
        <button class="key" id="delete">DEL</button>
        <button class="key" id="equals">=</button>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

在这个 HTML 结构中，我们定义了一个 .calculator 包含一个 .result 和一组 .keys。.result 用于显示计算结果，.keys 中包含了数字、运算符和功能按钮。

需要注意的是，每个键按钮都使用了 data-key 或 data-operator 属性来标识按钮是什么类型。

CSS 样式

接下来，我们为这个 HTML 页面编写 CSS 样式。以下是样式代码：

.calculator {
  margin: 30px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  width: 240px;
  text-align: center;
}

.result {
  display: block;
  font-size: 36px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}

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

.key {
  font-size: 24px;
  padding: 8px;
  background-color: #efefef;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

operator {
  background-color: #f89406;
  color: #fff;
}

#clear,
#delete {
  background-color: #c0392b;
  color: #fff;
}

这个样式定义通过一系列的 CSS 属性来定义计算器应用程序的外观和样式。我们使用了 CSS Grid 来布局键盘元素。

JavaScript 代码

最后，我们来到了代码最核心的部分——JavaScript 代码。以下是我们的 JavaScript 代码：

$(document).ready(function () {
  var $result = $('#result');
  var operationPerformed = false;

  $('.key').on('click', function () {
    var currentKey = $(this);
    var keyValue = currentKey.data('key');
    var operatorValue = currentKey.data('operator');

    if (keyValue === undefined && operatorValue === undefined) {
      return;
    }

    if (keyValue === '.') {
      if ($result.text().indexOf('.') !== -1) {
        return;
      }
    }

    if (operationPerformed === true) {
      $result.text('');
      operationPerformed = false;
    }

    $result.text(function (i, text) {
      return text + keyValue || operatorValue;
    });
  });

  $('#clear').on('click', function () {
    $result.text('');
  });

  $('#delete').on('click', function () {
    if ($result.text().length === 1) {
      $result.text('');
    } else {
      $result.text($result.text().slice(0, -1));
    }
  });

  $('#equals').on('click', function () {
    $result.text(function (i, text) {
      return eval(text);
    });
    operationPerformed = true;
  });
});

上面的代码用 jQuery 选择器和事件处理程序来定义了应用程序的功能和逻辑。以下是实现细节：

代码首先使用 jQuery 选择器分配 $result 成为结果标签元素的引用。
operationPerformed 布尔值用于追踪上次操作是否已被执行。
代码使用 jQuery on() 函数来为按钮元素定义单击事件处理程序。
data- 属性用于获取每个按钮的值或操作，其中 key 值用于数字和小数点按钮，operator 值用于运算符按钮。
如果一个数字或小数点已被点击，则该值被添加到显示结果中。
如果用户按下了运算符，则其值被添加到显示结果中。
如果用户按下了 C 按钮，则显示结果清空。
如果用户按下了 DEL 按钮，则显示结果中的最后一个字符被删除。
如果用户按下了 = 按钮，则显示结果被计算并显示，operationPerformed 被设置为 true。

总结

通过这个例子，我们学习到了使用 jQuery 框架开发 Web 应用程序的基础知识。jQuery 是一种流行的工具，使用它可以使我们的代码更容易维护和理解。我们希望你会发现设计和实现计算器应用程序的过程趣味盎然，同时也为你以后的 Web 开发之路奠定更加坚实的基础。