动态价格计算器中弹出窗口显示逻辑的优化-html教程-PHP中文网

动态价格计算器中弹出窗口显示逻辑的优化

本教程详细介绍了如何优化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 += `<div class="price-container"><span class="text">Bis ${key} Benutzer:</span> <span class="value">${price}€ </span></div>`;
  }
}

登录后复制

代码解释：

在函数开始处，通过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的价格阶梯显示。

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

查看详情

将以下代码片段添加到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 += `<div class="price-container"><span class="text">Bis ${key} Benutzer:</span> <span class="value">${price}€ </span></div>`;
  }
}

// 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

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js"></script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div class="grid-container" >
      <div style="width: 270px"class="grid-item">
        <header>Preiskalkulator</header>
        <div class="slidecontainer">
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
          Bürosoftware-Benutzer: <br>
          <input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
        </div>
        <div><b>Bürosoftware wählen</b></div>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" class="backendfunc"id = "backendfunktion" onchange = "calcSum();updatePreisStaffelungBackend()" >
          <option value="Z">Zeiterfassung</option>
          <option value="ZR"> Zeiterfassung + Rechnungswesen</option>
        </select>
        <div><b>Option wählen</b></div>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "zahlrythmus" onchange = "calcSum();checkHide(this)" >
          <option onclick="('hidden')" value="J">annual</option>
          <option value="M">monthly</option>
        </select>
      </div>
      <div class="grid-item" style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 138px" >App-Benutzer
              <div class="popover__wrapper">
                <div class="popover__title" style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div class="popover__content">
                  <p class="popover__message" style="font-size:12px;">Preisstaffelung-App</p>
                  <div id='preisstaffelapp' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <br > <div class='text-grey'>pro <span class="proapp" >7.50</span>€</div></td>
            <

登录后复制

以上就是动态价格计算器中弹出窗口显示逻辑的优化的详细内容，更多请关注php中文网其它相关文章！