博客

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

  • Post category:jquery

使用 jQuery 可以方便地获取表单元素的值，并进行计算并输出结果。

步骤如下：

  1. 使用 jQuery 获取输入框的值。

  2. 进行计算操作。

  3. 将计算结果输出到指定的元素中。

这里提供两个示例来说明如何实现这个功能。

示例一

我们建立一个简单的网页，包含一个输入框和一个按钮，用于计算输入框中数字的平方：

<!DOCTYPE html>
<html>
<head>
<title>计算输入值平方</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
  <label>请输入数字：</label>
  <input type="number" id="inputNum">
  <button id="btnCalc">计算平方</button>
</form>
<div>
  <p>计算结果：</p>
  <p id="result"></p>
</div>
<script>
  $(document).ready(function(){
    $("#btnCalc").click(function(){
      var inputNum = $("#inputNum").val();
      var result = inputNum * inputNum;
      $("#result").html(result);
    });
  });
</script>
</body>
</html>

对于这个示例，我们使用了 jQuery 的 val() 方法获取输入框中的值，并将计算结果写入 div 元素中的 p 元素中。

示例二

我们建立一个简单的网页，包含两个输入框和一个按钮，用于计算两个输入框中的数字相加的结果：

<!DOCTYPE html>
<html>
<head>
<title>计算输入值之和</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
  <label>请输入第一个数字：</label>
  <input type="number" id="inputNum1">
  <br>
  <label>请输入第二个数字：</label>
  <input type="number" id="inputNum2">
  <br>
  <button id="btnCalc">计算和</button>
</form>
<div>
  <p>计算结果：</p>
  <p id="result"></p>
</div>
<script>
  $(document).ready(function(){
    $("#btnCalc").click(function(){
      var inputNum1 = $("#inputNum1").val();
      var inputNum2 = $("#inputNum2").val();
      var result = Number(inputNum1) + Number(inputNum2);
      $("#result").html(result);
    });
  });
</script>
</body>
</html>

对于这个示例，我们同样使用了 val() 方法获取输入框中的值，并将其转换为数字类型后相加，并将计算结果写入 div 元素中的 p 元素中。

以上就是使用 jQuery 计算 HTML 输入值并直接显示输入值的完整攻略，希望可以帮助到大家。

Tags: