本文将指导你如何使用JavaScript创建一个简单的费用分摊计算器。该计算器允许用户输入姓名和花费金额(通过数字输入框),并自动计算出总费用和平均每人应分摊的金额。核心在于使用JavaScript数组来存储参与者姓名和对应金额,并通过reduce方法计算总金额,最终实现费用的平均分摊。
首先,我们需要创建一个包含输入框和显示区域的HTML结构。
<h1>Expenses app</h1> <p>Enter how much each person spent</p> <p>Nombre</p> <input type="text" id="nombre"> <br> <p>Monto</p> <input type="number" id="monto"> <br> <button onclick="ir()">Enviar</button> <br> <p>Total: <span id="final"></span> </p> <div id="list"></div> <div id="total"></div> <div id="total-people"></div> <p id="average"></p> <p>A cada uno le toca aportar: <span id="aporte"></span></p>
这个HTML代码创建了以下元素:
接下来,我们编写JavaScript代码来实现费用分摊的逻辑。
立即学习“Java免费学习笔记(深入)”;
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代码实现了以下功能:
将HTML和JavaScript代码保存到同一个文件中(例如 index.html),然后在浏览器中打开该文件。输入姓名和金额,点击 "Enviar" 按钮,即可看到计算结果。
这个简单的费用分摊计算器展示了如何使用JavaScript来处理用户输入、进行数据存储和计算,并将结果显示在页面上。你可以根据自己的需求,对其进行扩展和改进。
以上就是JavaScript实现多人分摊费用计算器:文本输入姓名,自动计算平均分摊额的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号