本教程详细介绍了如何优化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 yearlyapppreis = 7.5;backendpreis = 35;// Preisstaffelung Zeiterfassung+Rechnungswesen für Backendpreisvar 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 bewegtfunction 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 berechnenfunction 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ählenZeiterfassung Zeiterfassung + RechnungswesenOption wählenannual monthly
App-Benutzer <InfoPreisstaffelung-App
pro 7.50€以上就是动态价格计算器中弹出窗口显示逻辑的优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598106.html赞 (0)打赏微信扫一扫
支付宝扫一扫
关于作者
相关推荐
Win2003设置默认浏览器方法
Windows Server 2003 与 Windows 7 不同，系统并未内置“设置程序访问和默认值”功能，因此无法通过图形界面直接设定默认浏览器。若注册表中缺失以下关键键值，即使在浏览器内部进行设置，也无法成功将其设为默认。 1、 点击开始菜单，选择“运行”，输入 regedit 后回车，以启…
菜鸟app怎么给快递员打赏_菜鸟app快递员打赏操作方法
可通过菜鸟App打赏快递员以表达感谢，具体方式包括：一、在订单详情页点击“感谢小哥”按钮进行打赏；二、进入快递员个人主页选择“打赏”或“赠送心意”功能；三、通过“我的评价”或“服务记录”补发打赏。 如果您想对为您派送包裹的快递员表达感谢，可以通过菜鸟App进行打赏，以鼓励他们提供的优质服务。以下是具…
消息队列（RabbitMQ/Kafka）集成方案
选择消息队列时，rabbitmq适合需要灵活路由和可靠传递的系统，而kafka适用于处理大量数据流并要求数据持久化和顺序性的场景。1) rabbitmq在电商项目中用于异步处理订单和库存，提高响应速度和稳定性。2) kafka在实时数据分析项目中用于收集和处理海量日志数据，效果显著。 你问到消息队列…
“大语言模型与多智能体系统读书会”本周六开始啦！
导语 “大语言模型与多智能体系统读书会” 将于本周六晚 20 点开始第一次分享。这次将由圣母大学计算机科学在读博士生——郭泰成，以及目前火爆的多智能体框架 CAMEL 的创始人，牛津大学博士后——李国豪主讲！更多来自清华、北大、浙大、MIT、UIUC 等高校的论文作者将轮番登…
蝴蝶号无人直播如何提升平台推荐与播放量？
蝴蝶号无人直播提升推荐与播放量的核心在于理解算法偏好并优化内容策略。首先要提升用户停留时长和完播率，确保画面稳定、内容流畅；其次增强互动率，通过预设关键词触发机制实现评论互动；三是提高新关注与复播率，保持直播频率与稳定性；四要严守内容合规性，避免违规限流；五是持续分析数据并动态调整策略。 蝴蝶号无人…
一小时肝一份文档，宠你我们是认真的
在一个月黑风高、寂静无声的夜晚，mmdeploy 社区群内突然一片喧闹，群友们纷纷惊叹：牛啊，强啊！ 究竟发生了什么大事呢？作为资深吃瓜小编，我迅速准备好座位，马上带大家一探究竟！ 时间回到 2 月 25 日下午 6 点，我们的 Z 同学在模型部署后进行图像推理时，遇到了输入图像预处理时间过长的问题…
mac怎么改文件后缀名_mac修改文件后缀名教程
Mac上修改文件后缀名可通过访达重命名、设置显示扩展名、终端mv命令或for循环批量处理，操作前需确认目标应用支持新格式。 如果您在使用 Mac 时需要更改文件的后缀名，以便让系统以不同方式识别该文件或适配特定应用程序，可以通过以下方法实现。文件后缀名的修改会影响文件的打开方式和兼容性，因此操作前请…
夸克AI怎么处理合同文档_夸克AI合同审查与风险提示教程
使用夸克AI可高效审查合同并识别风险。首先上传PDF或Word格式合同至AI文档模块，确保内容清晰可读；接着启动“AI审查”功能，选择“合同风险检测”，系统将自动扫描责任、违约、保密等条款，并高亮潜在风险段落；随后查看AI生成的风险提示，逐条分析权利义务不对等、赔偿限额过高等问题，参考修改建议；最后…
VSCode安装必备Python插件_VSCode提升Python开发效率插件推荐
答案：VSCode提升Python开发效率需安装Python、Pylance、Black、isort和Jupyter插件，并配置虚拟环境与自动格式化。 在VSCode中提升Python开发效率，有几个插件是实打实的“必备”：首先是微软官方的Python扩展，它提供了最基础的语言支持、调试和测试功能；…
Laravel控制器方法间数据共享：安全传递Request对象
本文探讨了在Laravel控制器中，如何在不同方法间安全有效地共享Request对象及其他数据。通过利用控制器实例属性，我们可以将请求数据从一个方法传递到另一个方法，确保在同一HTTP请求生命周期内的数据一致性。文章提供了详细的代码示例，并强调了类型声明、初始化以及数据访问的注意事项，旨在帮助开发者…
如何实现用户邮箱验证功能？
邮箱验证功能的实现步骤包括：1）发送验证邮件，2）处理验证链接。使用python和flask可以实现基本的邮箱验证流程，需注意邮件发送的可靠性、验证链接的安全性、用户体验和错误处理。 在开发过程中，用户邮箱验证功能是一个常见的需求，它不仅能提高系统的安全性，还能确保用户提供的联系信息的有效性。我个人…
safari浏览器无法播放视频是什么问题_safari浏览器视频无法播放原因
首先检查Safari的自动播放权限并允许特定网站播放视频，接着确认已启用JavaScript以确保播放器正常加载，然后清除浏览器缓存与网站数据解决潜在的脚本错误，更新macOS和Safari至最新版本以支持现代视频格式与DRM保护，临时禁用内容拦截或广告屏蔽扩展排除插件干扰，最后通过切换网络环境和配…
GreatSQL 8.4.4-4 GA (2025-10-15)
GreatSQL 8.4.4-4 GA (2025-10-15) 版本信息 发布时间：2025年10月15日 版本号：8.4.4-4, Revision d73de75905d 下载链接：https://www.php.cn/link/b68f0b79fc8f10966e8642318429eab6…
Hibernate Search中嵌入/关联对象索引的深度解析与实践
本文深入探讨了在使用Hibernate Search对关联或嵌入式对象进行索引时遇到的常见问题，特别是当尝试将嵌入对象中的特定字段纳入主实体的索引时。通过分析HSEARCH000216错误，文章详细阐述了@IndexedEmbedded与@Field注解的协同工作机制，并提供了一个具体的代码示例来演…
VSCode写前端怎么调试_VSCode前端代码调试与浏览器联动教程
答案是通过配置VSCode的launch.json文件实现前端代码与浏览器的联动调试。具体需在项目根目录下创建.vscode/launch.json，设置type为pwa-chrome或pwa-msedge，request为launch或attach，指定url为本地开发服务器地址如http://l…
英特尔宣布 Altera 独立运营，550 亿美元的 FPGA 市场再迎变局
2024 年 3 月 1 日，英特尔宣布成立全新独立运营的 fpga 公司—— altera。独立运营的 altera 计划在未来 2-3 年内进行公开募股（ipo）。 此前英特尔数据中心和人工智能（DCAI）事业部总经理 Sandra Rivera 担任独立运营的 Altera 公司首席执行官。 …
货拉拉司机版如何监控车辆油耗控制成本_货拉拉司机版油耗监控的实用工具集成
一、使用货拉拉司机版内置油耗功能查看百公里油耗；二、连接OBD-II设备获取精准实时数据；三、通过第三方App记录加油信息并分析实际油耗；四、加装GPS油量传感器监控油箱油量，防范燃油异常。 如果您希望在货拉拉司机版中有效监控车辆油耗以控制运营成本，但发现手动记录或估算存在误差，则可能是由于缺乏对平…
edge浏览器播放视频时出现绿屏或黑屏怎么解决_edge浏览器播放绿屏黑屏解决方法
首先调整硬件加速设置，关闭后再重启Edge浏览器；其次更新或重新安装显卡驱动以提升兼容性；接着清除ShaderCache中的GPUCache文件夹；最后可重置浏览器设置以排除异常。 如果您在使用Edge浏览器播放视频时遇到绿屏或黑屏问题，这通常与硬件加速设置、显卡驱动或浏览器缓存有关。此类问题可能影…
智能推荐算法怎么实现_基于协同过滤的推荐系统构建
协同过滤通过用户或物品的互动关系预测偏好，分为基于用户和物品的两种方法，利用相似度计算进行推荐，但面临冷启动、数据稀疏性和流行度偏见等问题，需结合矩阵分解、时间因素或混合算法优化，常用准确率、召回率和NDCG等指标评估效果。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 De…
Node.js/JavaScript：高效转换嵌套对象数组为自定义字符串格式
本文将指导您如何在Node.js或JavaScript环境中，将来自MongoDB等数据源的嵌套对象数组，高效地转换为扁平化的自定义字符串格式。通过运用Array.prototype.map()、解构赋值、展开语法和模板字面量等现代JavaScript特性，您将学会如何优雅地处理复杂数据结构，实现清…
