正文

如何用jQuery实现计算器键盘按键实时响应与计算

/0 浏览量
1106

在本文中，我们将探讨如何使用jQuery来创建一个能够实时响应键盘按键并执行计算的计算器。我们将实现一个简单的计算器，支持基本的算术运算，如加、减、乘、除。

基础设置

首先，确保你的HTML和CSS文件已经准备好，并且链接了jQuery库。以下是计算器的基本HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  .calculator {
    width: 200px;
    margin: 50px auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  .button {
    width: 50px;
    height: 30px;
    margin: 2px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="calculator">
  <input type="text" id="display" disabled>
  <div class="button" onclick="addNumber('1')">1</div>
  <div class="button" onclick="addNumber('2')">2</div>
  <div class="button" onclick="addNumber('3')">3</div>
  <div class="button" onclick="addNumber('+')">+</div>
  <div class="button" onclick="addNumber('4')">4</div>
  <div class="button" onclick="addNumber('5')">5</div>
  <div class="button" onclick="addNumber('6')">6</div>
  <div class="button" onclick="addNumber('-')">-</div>
  <div class="button" onclick="addNumber('7')">7</div>
  <div class="button" onclick="addNumber('8')">8</div>
  <div class="button" onclick="addNumber('9')">9</div>
  <div class="button" onclick="addNumber('*')">*</div>
  <div class="button" onclick="addNumber('C')">C</div>
  <div class="button" onclick="addNumber('0')">0</div>
  <div class="button" onclick="calculate()">=</div>
  <div class="button" onclick="addNumber('/')">/</div>
</div>

<script>
  $(document).ready(function() {
    // 初始化显示
    $('#display').val('');

    // 添加数字或运算符到显示
    function addNumber(value) {
      $('#display').val($('#display').val() + value);
    }

    // 计算结果
    function calculate() {
      var expression = $('#display').val();
      try {
        var result = eval(expression);
        $('#display').val(result);
      } catch (e) {
        $('#display').val('Error');
      }
    }

    // 监听键盘事件
    $(document).keydown(function(e) {
      var key = e.key;
      if (key >= '0' && key <= '9' || key === '+' || key === '-' || key === '*' || key === '/' || key === 'Enter') {
        if (key === 'Enter') {
          calculate();
        } else {
          addNumber(key);
        }
      } else if (key === 'c' || key === 'C') {
        $('#display').val('');
      }
    });
  });
</script>

</body>
</html>

代码解析

  1. HTML结构：我们创建了一个包含数字和运算符按钮的div，以及一个用于显示输入和结果的文本输入框。

  2. CSS样式：为计算器按钮和显示设置了基本的样式。

  3. jQuery脚本：

    • 使用$(document).ready()确保DOM完全加载。
    • 初始化显示为空字符串。
    • addNumber函数将数字或运算符添加到显示。
    • calculate函数使用eval函数计算当前表达式并更新显示。
    • 监听键盘事件，允许用户通过键盘输入进行计算。

通过上述步骤，我们创建了一个简单的计算器，它能够通过键盘和按钮输入进行基本的算术运算。这个例子可以作为更复杂计算器实现的基础。

-- 展开阅读全文 --