本教程详细阐述如何在JavaScript价格计算器中实现根据用户选择的支付周期（月付或年付）动态调整商品价格。我们将重点介绍如何为月付选项应用20%的加价，并确保这一价格变化不仅体现在总价计算中，也准确地反映在价格详情弹窗的阶梯价格显示里，从而提供一个功能完善且用户友好的价格估算体验。
1. 概述与问题背景
在一个Web应用中构建价格计算器时，常常需要根据用户的不同选择（如支付频率、服务等级等）动态调整最终价格。本案例中，我们面临的需求是：当用户选择“月付”（monthly）时，所有相关商品的基础价格需要增加20%；而选择“年付”（annual）时，价格保持不变。更重要的是，这种价格调整不仅要体现在最终的总价上，还需要在展示商品价格阶梯（例如通过弹窗显示）时同步更新，以避免信息不一致。
原始代码已经具备了基础的价格计算逻辑和UI更新机制，但弹窗中的价格阶梯显示未与支付周期挂钩。解决此问题的关键在于：
在生成价格阶梯显示时，根据当前选定的支付周期应用相应的价格调整。确保当支付周期选项改变时，所有相关的价格显示（包括主计算结果和弹窗阶梯）都能被及时刷新。
2. 核心修改方案
为了实现上述目标，我们需要对JavaScript代码中的两个关键函数进行修改：printPreisstaffel（负责渲染价格阶梯）和 calcSum（负责总价计算及整体UI刷新）。
立即学习“Java免费学习笔记（深入）”；
2.1 修改 printPreisstaffel 函数：动态调整弹窗价格
printPreisstaffel 函数的职责是根据传入的价格模型（preisstaffel）和目标元素ID（idelement）来生成并显示价格阶梯。为了让它能够根据支付周期调整价格，我们需要在每次渲染时获取当前选定的支付周期，并据此对价格进行条件性修改。
修改前（部分）：
function printPreisstaffel(preisstaffel, idelement) { document.getElementById(idelement).innerHTML =""; for (var key in preisstaffel) { document.getElementById(idelement).innerHTML += `Bis ${key} Benutzer: ${(preisstaffel[key]).toFixed(2)}€ `; }}
修改后：
在循环遍历价格阶梯之前，我们首先获取支付周期的值。然后，在构建HTML字符串时，根据支付周期是“月付”（”M”）还是“年付”（”J”），决定是否对价格应用20%的加成。
function printPreisstaffel(preisstaffel, idelement) { document.getElementById(idelement).innerHTML = ""; // 清空现有内容 // 获取当前选定的支付周期 var paymenttype = document.querySelector("#zahlrythmus").value; for (var key in preisstaffel) { var price; if (paymenttype == "M") { // 如果是月付，价格增加20% price = (preisstaffel[key] * 1.2).toFixed(2); } else { // 否则（年付），价格保持不变 price = preisstaffel[key].toFixed(2); } // 更新弹窗显示的价格 document.getElementById(idelement).innerHTML += `Bis ${key} Benutzer: ${price}€ `; }}
解释：
document.querySelector(“#zahlrythmus”).value 用于获取ID为 zahlrythmus 的 元素当前选定的值（”M” 或 “J”）。通过 if (paymenttype == “M”) 判断是否为月付，如果是，则将 preisstaffel[key] 乘以 1.2 来实现20%的加价。toFixed(2) 用于将价格格式化为两位小数的字符串，符合货币显示习惯。
2.2 修改 calcSum 函数：确保UI全面刷新
calcSum 函数是整个价格计算器的核心，负责根据所有输入计算总价并更新各种显示区域。当支付周期改变时，不仅总价需要重新计算，价格阶梯弹窗也需要刷新以显示正确的加价。
修改前（部分）：
在原始代码中，printPreisstaffel 的调用在 DOMContentLoaded 事件监听器中进行初始化，但在 calcSum 中并没有重新调用来更新弹窗。
// ... (calcSum 函数的其他逻辑) ... // If abfrage für Backend um Preisstaffel anzeigen zu lassen if (backendtype == "ZR") { backendpreis = getPrice(pricingbackendzr, percent, backendanzahl); } else { backendpreis = getPrice(pricingbackendz, percent, backendanzahl); } apppreis = getPrice(pricingapp, percent, appanzahl);// ... (其他计算和UI更新) ...
修改后：
我们需要在 calcSum 函数中，在确定了 backendtype 之后，重新调用 printPreisstaffel 来刷新 App 和 Backend 的价格阶梯显示。
function calcSum() { // ... (保持 calcSum 函数开头部分不变，获取所有输入值) ... var backendanzahl = document.querySelector(".backenduser").value; var appanzahl = document.querySelector(".appuser").value; var paymenttype = document.querySelector("#zahlrythmus").value; // 再次获取支付类型 var backendtype = document.querySelector("#backendfunktion").value; // 根据支付类型设置全局百分比 (percent) if (paymenttype == "M") { percent = 1.2; // 月付加价20% } else { percent = 1; // 年付保持原价 } // 根据后端类型获取后端价格，并应用百分比 if (backendtype == "ZR") { backendpreis = getPrice(pricingbackendzr, percent, backendanzahl); } else { backendpreis = getPrice(pricingbackendz, percent, backendanzahl); } // 获取App价格，并应用百分比 apppreis = getPrice(pricingapp, percent, appanzahl); // 关键：重新调用 printPreisstaffel 来刷新弹窗中的价格阶梯 // 确保弹窗中的价格也根据当前的 paymenttype 进行调整 printPreisstaffel(pricingapp, "preisstaffelapp"); if (backendtype == "ZR") { printPreisstaffel(pricingbackendzr, "preisstaffelbackend"); } else { printPreisstaffel(pricingbackendz, "preisstaffelbackend"); } // ... (calcSum 函数的其余部分保持不变，继续计算总价和更新其他UI元素) ... var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2); summetext.textContent = mytext + "€"; // ... (其他UI更新逻辑) ...}
解释：
通过在 calcSum 中重新调用 printPreisstaffel(pricingapp, “preisstaffelapp”) 和 printPreisstaffel(pricingbackendzr/z, “preisstaffelbackend”)，我们确保每当用户改变支付周期（或任何其他影响价格的输入）时，弹窗内的价格阶梯也会被重新渲染，并应用最新的价格规则。calcSum 函数本身已经在 onchange 事件中被触发，因此这些修改将确保用户界面的实时响应。
2.3 DOMContentLoaded 和 updatePreisStaffelungBackend 函数的调整
在原始代码中，DOMContentLoaded 和 updatePreisStaffelungBackend 也调用了 printPreisstaffel。为了避免重复逻辑和潜在的冲突，或者确保所有路径都应用了新逻辑，我们需要检查这些地方。
原始 DOMContentLoaded：
document.addEventListener("DOMContentLoaded", function (event) { // ... 其他初始化 ... printPreisstaffel(pricingapp, "preisstaffelapp"); // 初始加载App价格阶梯 calcSum(); // 初始计算 updatePreisStaffelungBackend(); // 初始加载Backend价格阶梯});
原始 updatePreisStaffelungBackend：
function updatePreisStaffelungBackend() { var backendtype = document.querySelector("#backendfunktion").value; if (backendtype == "ZR"){ printPreisstaffel(pricingbackendzr, "preisstaffelbackend"); }else{ printPreisstaffel(pricingbackendz, "preisstaffelbackend"); }}
由于 calcSum 现在已经包含了刷新所有 printPreisstaffel 的逻辑，并且 calcSum 会在 DOMContentLoaded 时被调用，以及当 backendfunktion 改变时（通过 onchange = “calcSum();updatePreisStaffelungBackend()”，尽管 updatePreisStaffelungBackend 内部的 printPreisstaffel 调用现在可以被 calcSum 中的调用替代），我们可以对 DOMContentLoaded 和 updatePreisStaffelungBackend 进行简化或确保一致性。
优化后的 DOMContentLoaded：
calcSum() 已经会调用 printPreisstaffel，所以 DOMContentLoaded 中的 printPreisstaffel(pricingapp, “preisstaffelapp”) 这一行可以删除，或者保持，因为它不会造成错误，只是多一次渲染。为了代码简洁，可以移除。
document.addEventListener("DOMContentLoaded", function (event) { // ... 其他初始化 ... // printPreisstaffel(pricingapp, "preisstaffelapp"); // 这一行可以删除，因为 calcSum 会处理 calcSum(); // 确保初始加载时所有价格（包括弹窗）都正确显示 // updatePreisStaffelungBackend(); // 这一行也可以删除，因为 calcSum 内部已包含其逻辑});
优化后的 updatePreisStaffelungBackend：
由于 calcSum 已经负责根据 backendtype 调用正确的 printPreisstaffel，updatePreisStaffelungBackend 可以只调用 calcSum 来触发全面刷新，或者将其内部的 printPreisstaffel 调用移除。在HTML中，onchange = “calcSum();updatePreisStaffelungBackend()” 意味着 calcSum 和 updatePreisStaffelungBackend 都会被调用。如果 updatePreisStaffelungBackend 内部仍有 printPreisstaffel 调用，就会导致重复。最简洁的方式是让 updatePreisStaffelungBackend 仅作为触发 calcSum 的辅助函数。
HTML中的 onchange 属性：
Zeiterfassung Zeiterfassung + Rechnungswesen
因为 calcSum() 已经包含了 printPreisstaffel 的调用，并且会根据 backendtype 决定显示哪个价格阶梯，所以 updatePreisStaffelungBackend() 函数本身可以被简化，或者其在 onchange 中的调用可以被移除，只保留 calcSum()。
推荐的 updatePreisStaffelungBackend 简化：
function updatePreisStaffelungBackend() { // 仅调用 calcSum 来触发所有UI更新，避免重复逻辑 calcSum();}
或者，如果HTML中的 onchange 保持 onchange = “calcSum();updatePreisStaffelungBackend()”，那么 updatePreisStaffelungBackend 内部的 printPreisstaffel 调用可以直接移除，因为它会被 calcSum 覆盖。
function updatePreisStaffelungBackend() { // 仅获取backendtype，不再直接调用printPreisstaffel // 因为 calcSum() 已经会处理价格阶梯的更新 var backendtype = document.querySelector("#backendfunktion").value; // 实际上，如果 calcSum 已经被调用，这里不需要做额外的事情 // 除非有其他与 backendtype 相关的、calcSum 未处理的UI更新}
考虑到用户提供的解决方案，它选择在 calcSum 内部重新调用 printPreisstaffel，并且在 updatePreisStaffelungBackend 中也保留了 printPreisstaffel 的调用。这种方式虽然有些冗余，但在功能上是正确的，因为它确保了无论哪个函数触发，价格阶梯都会被更新。对于本教程，我们将遵循提供的解决方案，并在最终代码中体现。
3. 完整JavaScript代码示例 (app.js)
var percent = 1; // Standard value for yearly (年付标准值)apppreis = 7.5;backendpreis = 35;// Preisstaffelung Zeiterfassung+Rechnungswesen für Backendpreis (后端价格阶梯：时间跟踪+会计)var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };// Preisstaffelung Zeiterfassung für Backendpreis (后端价格阶梯：时间跟踪)var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };// Preisstaffelung App (App价格阶梯)var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };document.addEventListener("DOMContentLoaded", function (event) { // 滑块颜色更新逻辑 document.querySelectorAll(".updatecolor").forEach(updateinputs => updateinputs.addEventListener("input", function () { var percent = calcPercent(this.value, this.min, this.max); const bg = getComputedStyle(this).getPropertyValue('--background'); const slider = getComputedStyle(this).getPropertyValue('--slider'); var colorchanger = this.getAttribute('rangecolorid'); var sliderselect = document.querySelector('#' + colorchanger); sliderselect.setAttribute( 'style', ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) ` ) }) ); // 初始显示App价格阶梯 (注意：calcSum中也会调用，这里可以移除以避免冗余) printPreisstaffel(pricingapp, "preisstaffelapp"); // 初始计算并显示所有数据 calcSum(); // 初始显示后端价格阶梯 (注意：calcSum中也会调用，这里可以移除以避免冗余) updatePreisStaffelungBackend();});// 打印价格阶梯函数，现在包含支付周期判断function printPreisstaffel(preisstaffel, idelement) { document.getElementById(idelement).innerHTML = ""; // 清空现有内容 // 获取当前选定的支付周期 var paymenttype = document.querySelector("#zahlrythmus").value; for (var key in preisstaffel) { var price; if (paymenttype == "M") { // 如果是月付，价格增加20% price = (preisstaffel[key] * 1.2).toFixed(2); } else { // 否则（年付），价格保持不变 price = preisstaffel[key].toFixed(2); } // 更新弹窗显示的价格 document.getElementById(idelement).innerHTML += `Bis ${key} Benutzer: ${price}€ `; }}// 更新用户输入和滑块联动function updateUser(val, inputtype) { if (inputtype == 'Appuserrangecolor') { document.getElementById('AppInput').value = val; } if (inputtype == 'AppInput') { document.getElementById('Appuserrangecolor').value = val; } if (inputtype == 'Backendrangecolor') { document.getElementById('BackendInput').value = val; } if (inputtype == 'BackendInput') { document.getElementById('Backendrangecolor').value = val; } calcSum(); // 任何输入改变都重新计算}// 计算滑块百分比function calcPercent(curval, min, max) { return ((curval - min) / (max - min)) * 100;}// 更新后端价格阶梯显示 (现在会调用 calcSum 来确保所有UI更新)function updatePreisStaffelungBackend() { var backendtype = document.querySelector("#backendfunktion").value; if (backendtype == "ZR"){ printPreisstaffel(pricingbackendzr, "preisstaffelbackend"); }else{ printPreisstaffel(pricingbackendz, "preisstaffelbackend"); } // 实际上，如果 calcSum() 已经在 HTML onchange 中被调用， // 并且 calcSum() 内部也更新了价格阶梯，这里的逻辑可以被移除或简化为只调用 calcSum() // 但为了与原答案保持一致，这里保留。}// 核心计算函数，现在会刷新所有价格显示function calcSum() { var preisproapp = document.querySelector('.proapp'); var backendpreissum = document.querySelector('.backendpreissum'); var appstk = document.querySelector('.appanzahl'); var preisprobackend = document.querySelector('.probackend'); var jaehrlich = document.querySelector('.jaehrlichsum'); var summetext = document.querySelector('.summe'); var rabatt = document.querySelector('.rabattsum'); var backendanzahl = document.querySelector(".backenduser").value; var appanzahl = document.querySelector(".appuser").value; var paymenttype = document.querySelector("#zahlrythmus").value; var backendtype = document.querySelector("#backendfunktion").value; // 根据支付类型设置全局百分比 if (paymenttype == "M") { percent = 1.2; // 月付加价20% } else { percent = 1; // 年付保持原价 } // 根据后端类型获取后端价格，并应用百分比 if (backendtype == "ZR") { backendpreis = getPrice(pricingbackendzr, percent, backendanzahl); } else { backendpreis = getPrice(pricingbackendz, percent, backendanzahl); } // 获取App价格，并应用百分比 apppreis = getPrice(pricingapp, percent, appanzahl); // 关键：重新调用 printPreisstaffel 来刷新弹窗中的价格阶梯 // 确保弹窗中的价格也根据当前的 paymenttype 进行调整 printPreisstaffel(pricingapp, "preisstaffelapp"); if (backendtype == "ZR") { printPreisstaffel(pricingbackendzr, "preisstaffelbackend"); } else { printPreisstaffel(pricingbackendz, "preisstaffelbackend"); } // 计算并更新总价 var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2); summetext.textContent = mytext + "€"; // 计算并更新后端总价 var backendpreissumme = (backendanzahl * backendpreis).toFixed(2); backendpreissum.textContent = backendpreissumme + "€"; // 计算并更新App总价 var apppreissumme = (appanzahl * apppreis).toFixed(2); appstk.textContent = apppreissumme + "€"; // 计算并更新每个后端用户的价格 var probackend2 = ((backendpreis * backendanzahl)
以上就是JavaScript价格计算器：根据支付周期动态调整价格及弹窗显示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594916.html
微信扫一扫 
支付宝扫一扫 
