jquery计算器 jquery计算器代码

jQuery计算器实现详解

在网页开发中，表单是最常见的交互元素之一，计算器作为表单的一种，其功能和实用性不言而喻，本文将详细介绍如何使用jQuery来实现一个基本的计算器。

我们需要在HTML中创建一个基本的计算器布局，这包括显示结果的文本框，以及用于输入数字和执行操作的按钮。

<div id="calculator">
  <input type="text" id="display" readonly>
  <div id="buttons">
    <button class="num">1</button>
    <button class="num">2</button>
    <button class="num">3</button>
    <button class="operator">+</button>
    <button class="num">4</button>
    <button class="num">5</button>
    <button class="num">6</button>
    <button class="operator">-</button>
    <button class="num">7</button>
    <button class="num">8</button>
    <button class="num">9</button>
    <button class="operator">*</button>
    <button class="num">0</button>
    <button id="clear">C</button>
    <button id="equals">=</button>
    <button class="operator">/</button>
  </div>
</div>

接下来，我们需要使用jQuery来处理用户的输入和计算器的运算，我们需要给所有的按钮添加点击事件处理器，我们需要定义一个函数来处理用户的输入和运算。

$(document).ready(function() {
  var display = $('#display');
  var buttons = $('#buttons').find('button');
  var operator = '';
  var operand1 = '';
  var operand2 = '';
  buttons.click(function() {
    var value = $(this).text();
    if (value === 'C') {
      display.val('');
      operator = '';
      operand1 = '';
      operand2 = '';
    } else if (value === '=') {
      calculate();
    } else if (value === '+' || value === '-' || value === '*' || value === '/') {
      operator = value;
      operand1 = display.val();
      display.val('');
    } else {
      display.val(display.val() + value);
    }
  });
  function calculate() {
    operand2 = display.val();
    switch (operator) {
      case '+':
        display.val(parseFloat(operand1) + parseFloat(operand2));
        break;
      case '-':
        display.val(parseFloat(operand1) - parseFloat(operand2));
        break;
      case '*':
        display.val(parseFloat(operand1) * parseFloat(operand2));
        break;
      case '/':
        display.val(parseFloat(operand1) / parseFloat(operand2));
        break;
    }
    operator = '';
    operand1 = '';
    operand2 = '';
  }
});

以上代码首先获取了显示结果的文本框和所有的按钮，为所有的按钮添加了点击事件处理器，当用户点击按钮时，根据按钮的值来更新显示的结果和运算符，当用户点击等号按钮时，执行计算并更新显示的结果，当用户点击清除按钮时，清除显示的结果和运算符，定义了一个函数来执行计算，这个函数首先获取了两个操作数，然后根据运算符来执行相应的运算，并更新显示的结果。