jquery仿windows计算器

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

最近在尝试用jQuery打造一个仿Windows计算器的小程序，感觉自己的技术又提升了不少呢！💻✨ 计算器是大家日常生活中经常用到的工具，特别是对于我们这些经常需要处理数字的人来说，一个好用的计算器简直就像生活中的小助手，我就来分享一下如何用jQuery来实现一个简洁又实用的计算器。

我们需要了解jQuery这个强大的JavaScript库，它可以让DOM操作和事件处理变得更加简单快捷，对于我们这种想要快速上手的开发者来说，jQuery绝对是不二之选。

设计界面

在开始编码之前，我们得先设计一下计算器的界面，Windows计算器简洁直观，所以我们也打算模仿这种风格，计算器界面主要包括数字键、操作符键和功能键，我们需要用HTML和CSS来构建这个界面。

<div class="calculator">
  <div class="display">0</div>
  <div class="keys">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <!-- 更多按键 -->
  </div>
</div>

CSS部分，我们保持简洁的风格，让计算器看起来更加清爽。

.calculator {
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.display {
  width: 100%;
  border: 1px solid #000;
  margin-bottom: 10px;
  text-align: right;
  padding: 10px;
  font-size: 20px;
}
.keys button {
  width: 50px;
  height: 50px;
  margin: 5px;
  font-size: 20px;
}

编写jQuery逻辑

我们用jQuery来处理用户的操作，我们需要监听按钮的点击事件，并根据用户点击的按钮更新计算器的显示。

$(document).ready(function() {
  let display = $('.display');
  let currentInput = '';
  let operation = null;
  let previousNumber = '';
  // 监听数字按钮
  $('.keys button').on('click', function() {
    let value = $(this).text();
    if (operation) {
      currentInput = '';
      operation = null;
    }
    currentInput += value;
    display.text(currentInput);
  });
  // 监听操作符按钮
  $('.keys .operator').on('click', function() {
    let value = $(this).text();
    if (currentInput) {
      operation = value;
      previousNumber = parseFloat(currentInput);
      currentInput = '';
      display.text('');
    }
  });
  // 监听等号按钮
  $('.equals').on('click', function() {
    if (operation && currentInput) {
      let result;
      switch (operation) {
        case '+':
          result = previousNumber + parseFloat(currentInput);
          break;
        case '-':
          result = previousNumber - parseFloat(currentInput);
          break;
        case '*':
          result = previousNumber * parseFloat(currentInput);
          break;
        case '/':
          result = previousNumber / parseFloat(currentInput);
          break;
      }
      display.text(result);
      currentInput = result.toString();
      operation = null;
    }
  });
});