JavaScript价格计算器：根据支付周期动态调整弹窗价格显示教程-html教程-PHP中文网

JavaScript价格计算器：根据支付周期动态调整弹窗价格显示教程

本教程详细介绍了如何在javascript价格计算器中，根据用户选择的“月付”或“年付”选项，动态调整弹窗中显示的商品价格。通过修改核心价格显示函数并优化计算逻辑，确保“月付”时价格自动增加20%，而“年付”保持不变，从而提供准确的用户体验。

在构建交互式价格计算器时，一个常见的需求是根据用户选择的支付周期（例如月付或年付）来调整显示的价格。原始代码已经实现了对总价的调整，即在选择“月付”时将总价提高20%，选择“年付”时保持不变。然而，在用户点击“信息”按钮弹出的价格分级（Preisstaffelung）中，价格并未同步更新，这可能导致用户对价格的误解。本教程将指导您如何修改现有JavaScript代码，以确保价格分级弹窗中的价格也能根据支付周期动态调整。

理解现有价格计算与显示机制

在深入修改之前，我们首先需要理解代码中几个关键函数的职责：

calcSum(): 这是核心计算函数，负责根据用户输入和选择的选项计算总价、各项分项价格，并更新页面上的显示。它内部通过 percent 变量来处理月付/年付的折扣或加成。
getPrice(pricemodels, percent, amount): 此函数用于根据用户数量从价格模型中获取基础价格，并应用 percent 参数进行调整。
printPreisstaffel(preisstaffel, idelement): 此函数负责遍历价格分级数据 (preisstaffel)，并将其渲染到指定的HTML元素 (idelement) 中，通常用于显示在弹窗中。

问题的核心在于，printPreisstaffel 函数在渲染价格分级时，没有考虑当前的支付周期（月付或年付），而是直接显示了基础价格。

解决方案一：修改 printPreisstaffel 函数以应用支付周期调整

为了使价格分级弹窗中的价格也能根据支付周期动态调整，我们需要在 printPreisstaffel 函数内部引入支付周期的判断逻辑。

立即学习“Java免费学习笔记（深入）”；

修改步骤如下：

在 printPreisstaffel 函数内部，获取当前用户选择的支付周期。这可以通过读取ID为 zahlrythmus 的 select 元素的值来实现。
根据获取到的支付周期，对 preisstaffel[key] 进行相应的价格调整。如果选择“月付”（"M"），则将价格增加20%；否则（选择“年付”，"J"），保持原价。
将调整后的价格格式化为两位小数，并更新到HTML字符串中。

以下是修改后的 printPreisstaffel 函数代码：

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% (乘以1.2)
      price = (preisstaffel[key] * 1.2).toFixed(2);
    } else {
      // 否则（年付），价格保持不变
      price = preisstaffel[key].toFixed(2);
    }
    document.getElementById(idelement).innerHTML += `<div class="price-container"><span class="text">Bis ${key} Benutzer:</span> <span class="value">${price}€ </span></div>`;
  }
}

登录后复制

代码解释：

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

document.querySelector("#zahlrythmus").value;：这行代码用于获取用户在支付周期下拉菜单中选择的值（"M" 或 "J"）。
if (paymenttype == "M") { price = (preisstaffel[key] * 1.2).toFixed(2); }：如果 paymenttype 是 "M"（月付），则将当前价格 preisstaffel[key] 乘以 1.2（即增加20%），并使用 toFixed(2) 格式化为两位小数。
else { price = preisstaffel[key].toFixed(2); }：否则，如果 paymenttype 是 "J"（年付），则直接使用原始价格并格式化。

解决方案二：在 calcSum 函数中刷新价格分级显示

仅仅修改 printPreisstaffel 函数是不够的。当用户切换支付周期选项时，calcSum 函数会被调用，但 printPreisstaffel 并没有再次被调用以刷新弹窗内容。因此，我们需要在 calcSum 函数中，在确定了支付周期后，重新调用 printPreisstaffel 来更新弹窗显示。

修改 calcSum 函数，在处理完 percent 变量和计算完 apppreis 及 backendpreis 之后，添加对 printPreisstaffel 的调用。

function calcSum() {
  // ... (现有代码，获取各种DOM元素和用户输入) ...

  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 以刷新弹窗中的价格分级显示
  printPreisstaffel(pricingapp, "preisstaffelapp");
  if (backendtype == "ZR") {
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  } else {
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }

  // ... (现有代码，计算并更新总价、分项价格等) ...
}

登录后复制

代码解释：

在 calcSum 函数中，我们确保在 percent 变量根据 paymenttype 被正确设置，并且 apppreis 和 backendpreis 已经被 getPrice 函数计算之后，立即调用 printPreisstaffel。
printPreisstaffel(pricingapp, "preisstaffelapp"); 会更新App用户的价格分级弹窗。
条件判断 if (backendtype == "ZR") { ... } else { ... } 会根据选择的后端功能类型，更新对应的后端价格分级弹窗。

完整 app.js 代码示例

为了方便您理解，以下是经过修改和优化的 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) {
  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();
  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") {
      price = (preisstaffel[key] * 1.2).toFixed(2); // 月付增加20%
    } else {
      price = preisstaffel[key].toFixed(2); // 年付保持不变
    }
    document.getElementById(idelement).innerHTML += `<div class="price-container"><span class="text">Bis ${key} Benutzer:</span> <span class="value">${price}€ </span></div>`;
  }
}

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 (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
  var jaehrlicherrabatt = 0; // Initialize jaehrlicherrabatt
  if (paymenttype == "J") {
    jaehrlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 12).toFixed(2);
    jaehrlich.textContent = jaehrlicherrabatt + "€";
  } else {
    jaehrlich.textContent = ""; // Clear annual sum if not annual
  }
  // Rechnung für Ersparnis (此处逻辑似乎与需求不符，但保持原样)
  var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2); // 原代码中 rabattsum 依赖 jaehrlicherrabatt，需注意其作用域和计算逻辑
  rabatt.textContent = "-" + rabattsum + "€";

}

function checkHide(element) {
  var hidden = document.getElementById('hiddenMonthly');
  if (element && hidden) {
    element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
  }
}

function getPrice(pricemodels, percent, amount) {
  for (var key in pricemodels) {
    if (parseInt(key) >= parseInt(amount)) {
      return pricemodels[key] * percent;
    }
  }
  // If amount exceeds all defined keys, return the price of the largest key
  const lastKey = Object.keys(pricemodels).pop();
  return pricemodels[lastKey] * percent;
}

登录后复制

注意事项

DOM元素ID的准确性: 确保 document.querySelector("#zahlrythmus") 能够正确地选中HTML中支付周期选择框的ID。
函数调用时机: 任何可能影响价格计算或显示（包括弹窗）的用户交互（如滑块拖动、文本输入、下拉菜单选择）都应该触发 calcSum() 函数的调用，以确保所有价格数据同步更新。
代码可读性: 像 1.2 这样的魔法数字可以定义为常量，例如 const MONTHLY_PREMIUM_FACTOR = 1.2;，以提高代码的可读性和未来的维护性。
初始化: 在 DOMContentLoaded 事件监听器中，确保 calcSum() 和 updatePreisStaffelungBackend() 被调用，以便在页面加载时就显示正确的初始价格和价格分级。