如何使用jQuery计算HTML输入值并直接显示输入值？

要使用 jQuery 计算 HTML 输入值并直接显示输入值，我们可以按照以下步骤：

1. 获取需要计算的 HTML 元素
2. 监听 HTML 元素的改变事件，比如使用 change 事件
3. 在回调函数中获取元素的值，并进行计算
4. 将计算结果直接显示在目标元素中

下面我们通过两个示例来说明如何实现此功能。

示例 1：计算两个输入框的和并直接显示

在这个示例中，我们需要计算两个输入框的和，并将计算结果直接显示在页面上。我们可以使用以下代码实现：

<!-- HTML -->
<input type="number" id="num1" />
+
<input type="number" id="num2" />
=
<span id="result"></span>

// JavaScript/jQuery
$(document).ready(function() {
  // 获取需要计算的元素
  var $num1 = $('#num1');
  var $num2 = $('#num2');
  var $result = $('#result');

  // 监听元素的改变事件
  $num1.add($num2).on('change', function() {
    // 获取元素的值
    var val1 = parseFloat($num1.val());
    var val2 = parseFloat($num2.val());

    // 计算结果
    var sum = val1 + val2;

    // 将计算结果直接显示在目标元素中
    $result.text(sum);
  });
});

在这个示例中，我们使用 parseFloat() 来获取输入框的值，并使用 + 运算符计算输入框的和。最后，我们将计算结果直接显示在目标元素中。

示例 2：计算复利并显示

在这个示例中，我们需要计算复利并将计算结果直接显示在页面上。我们可以使用以下代码实现：

<!-- HTML -->
<div>
  本金：<input type="number" id="principal" /><br>
  年利率：<input type="number" id="rate" /><br>
  年数：<input type="number" id="years" /><br>

  <button id="calculate">计算</button><br>

  复利结果：<span id="compounded"></span>
</div>

// JavaScript/jQuery
$(document).ready(function() {
  // 获取需要计算的元素
  var $principal = $('#principal');
  var $rate = $('#rate');
  var $years = $('#years');
  var $compounded = $('#compounded');
  var $calculate = $('#calculate');

  // 监听按钮点击事件
  $calculate.on('click', function() {
    // 获取元素的值
    var principal = parseFloat($principal.val());
    var rate = parseFloat($rate.val());
    var years = parseFloat($years.val());

    // 计算复利结果
    var compounded = principal * Math.pow(1 + rate/100, years);

    // 将计算结果直接显示在目标元素中
    $compounded.text(compounded.toFixed(2));
  });
});

在这个示例中，我们使用 Math.pow() 函数计算复利，并使用 toFixed() 函数将计算结果转换为字符串并保留两位小数。最后，我们将计算结果直接显示在目标元素中。