本教程详细介绍了如何优化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)打赏微信扫一扫
支付宝扫一扫
关于作者
Flexbox与CSS多列布局：应对动态内容溢出的响应式表单设计上一篇 2025年12月23日 12:38:38构建自定义平滑粘性滚动效果：超越CSS的JavaScript实现下一篇 2025年12月23日 12:38:49相关推荐
Flexbox与CSS多列布局：应对动态内容溢出的响应式表单设计
本教程探讨在响应式表单设计中，如何解决flexbox两列布局在错误消息出现时溢出的问题。通过深入分析，我们提供了两种css解决方案：一种是利用flexbox嵌套容器实现显式列控制，另一种是采用css column-count属性进行多列布局。两种方法均能有效应对动态内容（如错误消息）引起的布局变化，…
如何利用 ::after 伪元素实现按钮缩放动画与精确定位
本文旨在解决使用 CSS `::after` 伪元素为按钮添加缩放动画时遇到的定位问题。我们将深入探讨 `position: absolute` 属性与 `top`、`bottom`、`left` 等定位属性的协同作用，解释为何 `::after` 元素可能未按预期覆盖按钮，并提供一套完整的解决方案…
JavaScript：在循环中为动态内容生成序列号
本文详细介绍了如何在javascript的for循环中为动态生成的数组或列表项添加唯一的序列号。通过利用循环变量i，我们能够轻松实现对每个输出结果进行编号，例如将’city #1’、’city #2’等格式化输出，从而提升用户界面的可读性和数据呈现的清…
Flexbox布局实践：实现图片与多段文本的优雅并排显示
本教程详细指导如何利用Flexbox将图片与多段文本内容并排布局。通过优化HTML容器结构，引入一个共同的Flex父容器，并合理设置子元素的Flex属性与宽度，即使面对复杂的文本内容和固定尺寸图片，也能实现精确且响应式的对齐效果。文章将通过具体代码示例，展示如何避免常见陷阱，并提供最佳实践建议。 1…
CSS实现文本垂直显示与旋转：从底部到顶部排版技术
本教程深入探讨了在网页中实现文本从底部到顶部垂直显示的技术。我们将详细介绍两种主要的css方法：一是利用transform属性进行精确的旋转和定位，包括rotate、translatex和transform-origin；二是结合writing-mode实现垂直排版，并通过transform: sc…
利用SCSS @extend 优化Bootstrap响应式列定义
本文深入探讨了如何利用scss的`@extend`指令，高效管理bootstrap的响应式列类，从而避免在html中重复声明`col-lg-*`和`col-md-*`等类。通过将bootstrap的实用类扩展到自定义css类中，开发者可以简化html结构、提高代码可读性和维护性，同时充分利用boot…
深度解析：解决动态网页与重定向场景下BeautifulSoup元素选择失败问题
本文旨在解决使用beautifulsoup进行网页抓取时，因网站重定向、会话管理或动态内容导致元素选择失败的问题。我们将深入探讨无头浏览器（如splinter）与直接http请求（如requests配合beautifulsoup）两种策略，并强调理解网站行为、利用开发者工具进行调试的重要性，以实现高…
HTML布局：解决内联元素换行问题与标签的应用
本文将探讨html中常见的内联元素换行问题，特别是当错误使用块级元素进行局部样式控制时。我们将详细解释` `标签的块级特性及其导致的换行，并提供使用“标签作为解决方案，以实现文本内容与日期信息在同一行显示，同时强调正确的html标签闭合规范，优化页面布局。 理解HTML元素的显示特性：块…
JavaScript DOM操作：点击父元素时动态移除类名与特定子孙元素
本教程将指导您如何使用javascript处理dom事件，实现当用户点击特定父元素时，不仅移除该父元素自身的css类，还能同时查找并移除其内部具有特定css类的所有子孙元素。我们将通过具体的html结构和javascript代码示例，详细讲解如何利用事件监听器、类名操作以及元素查询与移除等dom a…
JavaScript 事件处理与 DOM 元素动态移除教程
本教程详细阐述了如何使用 javascript 动态管理 dom 元素。我们将学习如何通过事件监听器，在用户点击特定父元素时，移除该父元素自身的 css 类，并有条件地查找并移除其嵌套的特定子孙元素。文章涵盖了 queryselectorall、addeventlistener、classlist.…
从Canvas获取图片Base64数据：异步加载与跨域处理指南
本文旨在解决从html canvas元素中获取图片base64数据时遇到的常见问题，特别是当图片资源需要异步加载或涉及跨域时。我们将深入探讨图片加载的异步特性以及canvas的跨域安全限制，并提供正确处理这些场景的javascript代码示例，确保能准确、有效地从canvas中提取所需的图片数据。 …
CSS ::after 伪元素精准定位与动画效果实现教程
本教程详细阐述如何利用 css `::after` 伪元素为按钮创建动态的背景缩放效果。文章重点讲解了 `position: absolute` 和 `relative` 的协同应用，以及 `top`、`left`、`bottom` 和 `z-index` 等关键定位属性，确保伪元素在父元素下方正确…
基于CSS和JavaScript实现滑动式登录/注册表单切换效果
本教程详细讲解如何使用%ignore_a_1%、css和javascript构建一个带有滑动切换动画的登录/注册表单。我们将深入探讨关键的css选择器问题，特别是`.container.right-panel-active.log-in-container`与`.right-panel-active…
PHP 关联数组：理解与高效迭代
本教程详细介绍了 PHP 中关联数组的创建、元素访问及其高效迭代方法。文章将阐明为何传统的 `for` 循环不适用于键值非数字的关联数组，并重点讲解如何利用 `foreach` 循环安全且优雅地遍历所有元素，同时提供代码示例和最佳实践，以帮助开发者避免常见的错误。 PHP 关联数组的基础与应用 在 …
实现绝对定位元素溢出其滚动父容器的教程
本教程旨在解决绝对定位元素被其滚动父容器剪裁的问题。我们将通过调整父元素的 position 属性、绝对定位元素的定位方式，并关键性地将中间父元素的 overflow 属性设置为 visible，来实现在不改变元素结构的前提下，使绝对定位元素能够自由溢出其容器。 引言：绝对定位与溢出剪裁的挑战 在网…
JavaScript实现页面加载后延迟自动选中单选按钮教程
本教程详细介绍了如何利用javascript在网页加载后的指定延迟时间（例如2-3秒）后，自动选中特定的单选按钮。通过使用`settimeout`函数结合`document.getelementbyid`和`.click()`方法，开发者可以轻松实现页面元素（如单选按钮或相关容器）的自动化交互，提升…
从 Canvas 获取图像 Base64 数据：异步处理与跨域考量
本教程详细阐述了如何从 %ignore_a_1% canvas 中正确提取图像的 base64 数据。核心内容包括理解图像加载的异步特性，确保在图像完全加载并绘制到 canvas 后再调用 `todataurl` 方法。同时，文章强调了处理跨域图像时的 cors 配置，通过设置 `crossorig…
使用CSS Grid构建响应式图片与内容布局
本教程详细介绍了如何利用CSS Grid布局实现图片与文本内容的响应式排列，尤其适用于将图片和按钮与段落文本并排放置的场景。文章将指导读者通过结构优化、使用Grid属性以及引入全局最大宽度容器来构建灵活且适应不同屏幕尺寸的网页布局，旨在帮助前端初学者掌握现代CSS布局技巧。 响应式布局挑战与CSS …
如何通过CSS精确控制网页背景色
本教程详细阐述了如何利用CSS有效地控制网页的整体背景颜色，核心在于正确地选择和样式化` `标签。文章将介绍外部/内部样式表和行内样式两种方法，并通过代码示例展示如何为网页设置统一的背景色，避免常见的问题，确保页面视觉风格的一致性。 在网页设计与开发中，为整个页面设置统一的背景色是一项基础而重要的任…
解决Haskell CGI应用在Apache下读取文件数据时输出截断问题
本教程探讨Haskell CGI应用在Apache服务器环境下，读取包含非ASCII字符的文件数据时，HTML输出可能被截断的问题。核心原因在于CGI环境的默认语言环境（LANG=C）与文件编码不匹配。我们将详细介绍如何通过在CGI主函数中设置`GHC.IO.Encoding.setLocaleEn…
微信扫一扫 
支付宝扫一扫 
