HTML通过JavaScript实现加法运算，利用表单输入获取数值并动态显示结果；2. 使用parseFloat()转换数字，oninput实现实时计算，querySelectorAll()处理多个输入项，适用于购物车合计等场景。
在HTML中实现加法运算，通常需要借助JavaScript来完成。因为HTML本身是静态标记语言，无法直接进行数学计算。我们可以通过表单输入获取数值，再用JavaScript处理加法逻辑，并将结果显示在页面上。
使用JavaScript实现简单的加法运算
通过JavaScript可以轻松实现两个数的相加。以下是一个基础示例：
<input type="number" id="num1" placeholder="输入第一个数"><br><input type="number" id="num2" placeholder="输入第二个数"><br><button onclick="addNumbers()">计算加法</button><br><p id="result"></p><br><br><script><br>function addNumbers() {<br> const a = parseFloat(document.getElementById('num1').value) || 0;<br> const b = parseFloat(document.getElementById('num2').value) || 0;<br> const sum = a + b;<br> document.getElementById('result').innerText = '结果：' + sum;<br>}<br></script>
说明：
- parseFloat() 将输入值转为数字，支持小数。
- || 0 防止空值或非数字输入导致NaN。
- 点击按钮触发 addNumbers() 函数执行加法。
利用表单自动计算（实时加法）
如果希望用户输入时就自动显示结果，可以监听输入事件：
立即学习“Java免费学习笔记（深入）”；
<input type="number" id="val1" oninput="calculateSum()" placeholder="数值1"><br><input type="number" id="val2" oninput="calculateSum()" placeholder="数值2"><br><strong>合计：<span id="total">0</span></strong><br><br><script><br>function calculateSum() {<br> const x = parseFloat(document.getElementById('val1').value) || 0;<br> const y = parseFloat(document.getElementById('val2').value) || 0;<br> document.getElementById('total').textContent = x + y;<br>}<br></script>
特点：
- oninput 事件在用户输入时立即触发。
- 适合用于价格合计、数量统计等场景。
处理多个输入项的加法（如购物车合计）
如果有多个动态输入框，可以用类名统一处理：
<input class="amount" type="number" value="0" oninput="sumAll()"><br><input class="amount" type="number" value="0" oninput="sumAll()"><br><input class="amount" type="number" value="0" oninput="sumAll()"><br><p>总和：<span id="totalSum">0</span></p><br><br><script><br>function sumAll() {<br> let total = 0;<br> const inputs = document.querySelectorAll('.amount');<br> inputs.forEach(input => {<br> total += parseFloat(input.value) || 0;<br> });<br> document.getElementById('totalSum').textContent = total;<br>}<br></script>
优势：
- 可扩展性强，适用于任意数量的输入框。
- 结合CSS类选择器，管理更方便。
基本上就这些。只要掌握 获取元素值、转换为数字 和 用JS做加法 这几个关键点，就能在网页中灵活实现各种加法计算功能。
