本教程详细介绍了如何优化javascript价格计算器，使其在用户选择“月度”支付选项时，能正确地在弹出窗口中显示包含20%增幅的价格，而在选择“年度”支付时保持原价。文章通过修改核心函数`printpreisstaffel`并调整价格刷新机制，实现了价格显示与支付周期的动态联动，确保用户界面数据的准确性与一致性。
引言：价格计算器中的动态价格显示需求
在构建交互式价格计算器时，根据用户选择的不同选项动态调整价格显示是一项常见需求。本教程将聚焦于一个具体的场景：当用户在价格计算器中选择“月度”支付选项时，希望所有在弹出窗口（popover）中显示的基准价格都自动增加20%；而选择“年度”支付时，价格保持不变。原始实现中，虽然整体计算逻辑能够处理月度与年度的费率差异，但弹出窗口中的价格阶梯（Preisstaffelung）未能实时反映这一变化。
问题分析：弹出窗口价格未动态更新的原因
原始代码中的calcSum函数负责计算总价，并根据#zahlrythmus（支付节奏）选择器的值来设置一个全局的percent变量（月度为1.2，年度为1）。这个percent变量被传递给getPrice函数，用于计算最终的商品价格。
然而，负责在弹出窗口中显示价格阶梯的printPreisstaffel函数，在初始设计中并未考虑到支付周期的影响。它直接遍历价格模型（pricingapp, pricingbackendzr, pricingbackendz）并显示原始价格，没有引入percent或paymenttype的判断。此外，calcSum函数内部对printPreisstaffel的调用时机也需要调整，以确保在paymenttype确定后，弹出窗口的价格能立即刷新。
解决方案：实现弹出窗口价格的动态调整
为了解决上述问题，我们需要对printPreisstaffel函数进行修改，并在calcSum函数中确保正确调用。
步骤一：修改 printPreisstaffel 函数以支持动态价格调整
printPreisstaffel函数需要能够感知当前的支付类型，并据此调整显示的价格。我们将在该函数内部获取#zahlrythmus的值，并根据其是“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);
}
// 更新HTML以显示调整后的价格
document.getElementById(idelement).innerHTML += `Bis ${key} Benutzer: ${price}€ `;
}
}代码解释：
- 在函数开始处，通过document.querySelector("#zahlrythmus").value获取用户当前选择的支付周期。
- 在遍历preisstaffel（价格阶梯）时，根据paymenttype的值进行条件判断：
- 如果paymenttype为"M"（monthly），则将原始价格preisstaffel[key]乘以1.2（即增加20%）。
- 否则（默认为"J" annual），价格保持preisstaffel[key]不变。
- 使用toFixed(2)确保价格始终显示两位小数。
- 将计算出的price插入到相应的HTML结构中。
步骤二：在 calcSum 函数中确保价格阶梯的刷新
calcSum函数是整个价格计算的核心，它在用户输入或选择发生变化时被调用。为了确保弹出窗口中的价格阶梯在支付类型改变时也能及时更新，我们需要在calcSum函数中，在确定paymenttype之后，重新调用printPreisstaffel函数来刷新App和Backend的价格阶梯显示。
将以下代码片段添加到calcSum函数中，紧随percent变量根据paymenttype被设置之后：
function calcSum() {
// ... (现有变量声明和初始化代码) ...
var paymenttype = document.querySelector("#zahlrythmus").value;
var backendtype = document.querySelector("#backendfunktion").value;
if (paymenttype == "M") {
percent = 1.2; // standardvalue for monthly
} else {
percent = 1; // standardvalue for annual
}
// 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);
// 确保在支付类型确定后，刷新弹出窗口中的价格阶梯显示
printPreisstaffel(pricingapp, "preisstaffelapp"); // 刷新App价格阶梯
if (backendtype == "ZR") {
printPreisstaffel(pricingbackendzr, "preisstaffelbackend"); // 刷新Backend ZR价格阶梯
} else {
printPreisstaffel(pricingbackendz, "preisstaffelbackend"); // 刷新Backend Z价格阶梯
}
// ... (calcSum 函数的其余计算和UI更新代码) ...
}代码解释：
- 这些printPreisstaffel的调用被放置在percent变量根据paymenttype更新之后。这样，当printPreisstaffel函数被执行时，它能获取到最新的paymenttype，并据此计算和显示正确的价格。
- 原代码中DOMContentLoaded事件监听器内的printPreisstaffel(pricingapp, "preisstaffelapp");和updatePreisStaffelungBackend();调用负责初始化显示。updatePreisStaffelungBackend函数内部也调用了printPreisstaffel，因此也需要确保其调用的是更新后的printPreisstaffel函数。
步骤三：更新 updatePreisStaffelungBackend 函数（可选但推荐）
虽然calcSum已经包含了刷新逻辑，但updatePreisStaffelungBackend函数在后端功能类型改变时也会被调用。为了保持一致性，确保它也使用更新后的printPreisstaffel函数。此函数本身无需修改，因为printPreisstaffel内部已经包含了paymenttype的判断。
function updatePreisStaffelungBackend() {
var backendtype = document.querySelector("#backendfunktion").value;
if (backendtype == "ZR"){
// 这里调用的 printPreisstaffel 已经是修改过的版本
printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
}else{
// 这里调用的 printPreisstaffel 已经是修改过的版本
printPreisstaffel(pricingbackendz, "preisstaffelbackend");
}
}完整 JavaScript 代码 (app.js)
var percent = 1; // Standardvalue for yearly
apppreis = 7.5;
backendpreis = 35;
// Preisstaffelung Zeiterfassung+Rechnungswesen für Backendpreis
var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };
var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };
document.addEventListener("DOMContentLoaded", function (event) {
var updatecolor = document.querySelectorAll('.updatecolor');
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}%) `
)
})
);
// Initiale Anzeige der Daten
calcSum(); // calcSum内部会调用printPreisstaffel
// Initiale Anzeige für Backend Preisstaffel (calcSum已处理，此处可以移除或保留作为初始化)
// updatePreisStaffelungBackend(); // calcSum已包含刷新逻辑，此处可以移除或保留
});
function printPreisstaffel(preisstaffel, idelement) {
document.getElementById(idelement).innerHTML = "";
var paymenttype = document.querySelector("#zahlrythmus").value;
for (var key in preisstaffel) {
var price;
if (paymenttype == "M") {
price = (preisstaffel[key] * 1.2).toFixed(2); // 月度增加20%
} else {
price = preisstaffel[key].toFixed(2); // 年度不变
}
document.getElementById(idelement).innerHTML += `Bis ${key} Benutzer: ${price}€ `;
}
}
// funktion damit der Slider sich beim eingeben vom input field bewegt
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;
}
function updatePreisStaffelungBackend() {
var backendtype = document.querySelector("#backendfunktion").value;
if (backendtype == "ZR") {
printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
} else {
printPreisstaffel(pricingbackendz, "preisstaffelbackend");
}
}
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; // standardvalue for monthly
} else {
percent = 1; // standardvalue for annual
}
// 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);
// 刷新弹出窗口中的价格阶梯显示
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 + "€";
// Rechnung für Backendpreissumme
var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
backendpreissum.textContent = backendpreissumme + "€";
// Rechnung für Apppreissumme
var apppreissumme = (appanzahl * apppreis).toFixed(2);
appstk.textContent = apppreissumme + "€";
// Rechnung für Preis pro Backendbenutzer
var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
preisprobackend.textContent = probackend2;
// Rechnung für Preis pro App-Benutzer
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
preisproapp.textContent = proapp2;
// If Abfrage wenn "Jaehrlich" ausgewaehlt wird
if (paymenttype == "J") {
var jaehrlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 12).toFixed(2);
jaehrlich.textContent = jaehrlicherrabatt + "€";
}
// Rechnung für Ersparnis
var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2); // 注意：这里可能需要根据实际业务逻辑调整，如果 annual 已经有折扣，此处的 0.2 需谨慎。
rabatt.textContent = "-" + rabattsum + "€";
}
// rabatt wird nicht berechnet beim zweiten mal
// Rechnung für Jaehrlich und Monatlich(10% Rabatt für Jaehrlich)
function checkHide(element) {
var hidden = document.getElementById('hiddenMonthly');
if (element && hidden) {
element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
}
}
// funktion um preisstaffel zu berechnen
function getPrice(pricemodels, percent, amount) {
for (var key in pricemodels) {
// If key is higher than the selected amount, return the value
if (parseInt(key) >= parseInt(amount)) {
return pricemodels[key] * percent;
}
}
// 如果没有匹配到，返回最后一个价格（或根据业务逻辑处理）
const lastKey = Object.keys(pricemodels).pop();
return pricemodels[lastKey] * percent;
}HTML (index.html) 和 CSS (styles.css)
HTML和CSS代码保持不变，因为这些修改只涉及JavaScript逻辑。
index.html
Document
Preiskalkulator
Bürosoftware wählen
Option wählen
App-Benutzer
Info
pro 7.50€
<
相关文章
如何让图片随浏览器窗口大小自适应缩放
如何修复模态框（Modal）点击无法显示或关闭的问题
如何实现底部固定（Sticky Bottom）导航菜单
如何实现底部固定悬浮菜单（Sticky Bottom Menu）
如何让粘性菜单固定在页面底部而非顶部
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
相关专题
更多
js获取数组长度的方法
在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。
553
2023.06.20
js刷新当前页面
js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容
374
2023.07.04
js四舍五入
js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容
731
2023.07.04
js删除节点的方法
js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
477
2023.09.01
JavaScript转义字符
JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。
394
2023.09.04
js生成随机数的方法
js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。
990
2023.09.04
如何启用JavaScript
JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。
656
2023.09.12
Js中Symbol类详解
javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。
551
2023.09.20
Golang gRPC 服务开发与Protobuf实战
本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践，涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC（Unary/Server/Client/Bidirectional）、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例，帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系，适用于微服务与内部系统通信场景。
0
2026.01.15
热门下载
更多
相关下载
更多
精品课程
更多
相关推荐 /
热门推荐 /
最新课程
最新文章
更多
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
