本文档旨在提供一个使用 JavaScript 实现平均分摊金额功能的教程。该教程演示了如何使用文本输入框收集参与者姓名和金额，并计算出每个人应分摊的平均金额。我们将详细讲解代码实现，并提供完整的 HTML 和 JavaScript 代码示例，帮助开发者理解和应用该功能。
功能概述
我们的目标是创建一个简单的费用分摊应用，用户可以输入参与者的姓名和花费金额，应用会自动计算出总金额和平均每人应分摊的金额。关键点在于，我们使用 input type=”text” 来接收参与者姓名，并使用 input type=”number” 接收金额，并动态更新显示结果。
HTML 结构
首先，我们需要构建 HTML 结构，包括输入框、按钮和显示结果的区域。
Expenses app
Enter how much each person spent
Nombre
Monto
Total:
A cada uno le toca aportar:
这段 HTML 代码定义了以下元素：
立即学习“Java免费学习笔记（深入）”；
Writer
企业级AI内容创作工具
176 查看详情 一个标题
Expenses app
两个输入框，分别用于输入姓名 (#nombre) 和金额 (#monto)。一个按钮，点击时触发 ir() 函数。几个用于显示计算结果的 和
JavaScript 实现
接下来，我们编写 JavaScript 代码来实现核心逻辑。
const arr = []const nombre = document.getElementById("nombre")const monto = document.getElementById("monto")const total = document.getElementById("total")const final = document.getElementById("final")const aporte = document.getElementById("aporte")const list = document.getElementById("list")const average = document.getElementById("average")function ir() { let nombreVal = nombre.value let montoVal = monto.value if(nombreVal === '' || montoVal === '') return let exist = arr.find(({name, score}) => name === nombreVal) if (exist) { exist.score = Number(montoVal) } else { arr.push({name:nombreVal, score: montoVal}) } let totalScore = arr.reduce((total, ele) => total += Number(ele.score), 0) let totalPeople = arr.length list.textContent = ''; arr.forEach(ele => { let nodeNombre = document.createElement('p') nodeNombre.innerHTML = ele.name + ': ' + ele.score list.appendChild(nodeNombre); }) final.innerHTML = `${totalScore}`; aporte.innerHTML = `${totalPeople}`; average.innerHTML = `average : ${totalScore/totalPeople}` };
这段 JavaScript 代码实现了以下功能：
获取元素引用: 使用 document.getElementById() 获取 HTML 元素，方便后续操作。定义 ir() 函数: 这个函数在点击按钮时被调用，负责处理用户输入和计算。获取输入值: 从 #nombre 和 #monto 输入框获取用户输入的姓名和金额。输入验证: 检查姓名和金额是否为空，如果为空则直接返回，不进行后续计算。数据存储: 使用数组 arr 存储参与者信息，包括姓名和金额。检查用户是否存在: 使用 arr.find() 检查是否已存在同名用户，如果存在则更新金额，否则添加新用户。计算总金额和平均金额: 使用 arr.reduce() 计算总金额，并计算平均金额。更新显示: 将计算结果更新到对应的 HTML 元素中，包括总金额 (#final)、参与者列表 (#list) 和平均金额 (#average)。
代码详解
数据存储结构: arr 数组存储的是对象，每个对象包含 name (姓名) 和 score (金额) 两个属性。arr.find() 的使用: arr.find() 方法用于查找数组中符合条件的第一个元素。如果找到，则返回该元素；否则返回 undefined。arr.reduce() 的使用: arr.reduce() 方法用于将数组中的所有元素累加到一个值。它接收一个回调函数作为参数，该回调函数接收两个参数：total (累加值) 和 ele (当前元素)。动态更新列表: 使用 list.textContent = ”; 清空列表内容，然后遍历 arr 数组，动态创建
元素并添加到 #list 元素中。
总结
通过以上步骤，我们成功创建了一个简单的费用分摊应用。该应用使用文本输入框收集参与者姓名和金额，并计算出每个人应分摊的平均金额。希望这个教程能帮助你理解和应用 JavaScript，并构建出更复杂的 Web 应用。
以上就是使用文本输入实现平均分摊金额的 JavaScript 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/940551.html
微信扫一扫
支付宝扫一扫
