jQuery实现计算器功能

jQuery是一个非常流行的JavaScript库，可以使DOM操作、事件处理、动画效果等方面的编程变得更加简单、快捷，也非常方便地实现计算器的功能。

下面是“jQuery实现计算器功能”的完整攻略：

步骤1：HTML结构

首先，我们需要编写HTML结构，包含计算器的各个按钮、输入框和结果显示区域，示例如下：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="calculator">
      <input type="text" id="result" value="">
      <table>
        <tr>
          <td><button id="btn_7">7</button></td>
          <td><button id="btn_8">8</button></td>
          <td><button id="btn_9">9</button></td>
          <td><button id="btn_divide">/</button></td>
        </tr>
        <tr>
          <td><button id="btn_4">4</button></td>
          <td><button id="btn_5">5</button></td>
          <td><button id="btn_6">6</button></td>
          <td><button id="btn_multiply">*</button></td>
        </tr>
        <tr>
          <td><button id="btn_1">1</button></td>
          <td><button id="btn_2">2</button></td>
          <td><button id="btn_3">3</button></td>
          <td><button id="btn_minus">-</button></td>
        </tr>
        <tr>
          <td><button id="btn_0">0</button></td>
          <td><button id="btn_point">.</button></td>
          <td><button id="btn_clear">C</button></td>
          <td><button id="btn_plus">+</button></td>
        </tr>
        <tr>
          <td colspan="4"><button id="btn_equal">=</button></td>
        </tr>
      </table>
    </div>
  </body>
</html>

步骤2：CSS样式

接下来，我们需要为计算器添加一些样式，使其显示更美观，可以根据自己的需求进行修改。示例如下：

#calculator {
  margin: 50px auto;
  padding: 10px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #eee;
}

#result {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: right;
  font-size: 24px;
  padding-right: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

td {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

td button {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
}

td button:hover {
  background-color: #ccc;
}

步骤3：JavaScript代码实现

最后，我们需要编写JavaScript代码，实现计算器的功能，需要用到jQuery库的各种API。具体实现详见代码和注释：

$(function() {
  // 按钮单击事件
  $('button').click(function() {
    var val = $(this).text(); // 获取按钮上的文本内容
    var result = $('#result').val(); // 获取当前输入框中的内容

    // 判断按钮类型
    switch (val) {
      case '=':
        try {
          // 计算表达式并显示结果
          $('#result').val(eval(result));
        } catch(e) {
          // 表达式有误，清空输入框并显示错误信息
          $('#result').val('');
          alert('表达式有误！');
        }
        break;
      case 'C':
        // 清空输入框和错误信息
        $('#result').val('');
        break;
      default:
        // 在输入框中追加按钮上的文本内容
        $('#result').val(result + val);
        break;
    }
  });
});

参考示例1：https://codepen.io/ginnyisme/pen/PoWKqZQ

参考示例2：https://codepen.io/salmanbinarif/pen/yjPRLq

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现计算器功能 - Python技术站

jQuery实现计算器功能

步骤1：HTML结构

步骤2：CSS样式

步骤3：JavaScript代码实现

相关文章