使用JavaScript的成本计算器 - 高级 - Cost Calculator using JavaScript

所以我有一个HTML表单，该表格具有两个下拉菜单和一个按钮。一个下拉菜单的"包装类型"由"金"，"银"one_answers"青铜"组成。第二个下拉菜单的"月"为12个选项（最多12个月），然后是一个计算按钮。

现在，这是我希望我能解释得很好的一点...

如果选择"银"one_answers" 1个月"，则花费150.00英镑。

如果您选择"银"one_answers" 2个月"，则花费225.00英镑。

如果您选择"银"one_answers" 3个月"，它将花费300.00英镑。

等等（最多12个月）。因此，以上的逻辑为第一个月的150.00英镑，然后额外75英镑。

但是，如果您决定要拥有一个"黄金"包，则如下：

如果您选择"黄金"one_answers" 1个月"，它将花费199.00英镑。

如果您选择"黄金"one_answers" 2个月"，它将花费298.50英镑。

如果您选择"黄金"one_answers" 3个月"，它将花费398.00英镑。

等等（最多12个月）。因此，上述逻辑为第一个月的199.99英镑，然后再额外99.50英镑。

也类似于"青铜"，除了1个月的价格为75.00英镑，2个月为112.50英镑（逻辑为第一个月的75.00英镑，额外的月份为37.50英镑）。

我希望这有意义吗？以下是该表格的HTML，我知道这不起作用，但这只是尝试解释...

<form name="costcalculator">
  <div class="package-type">
<select name="packageType" id="packageType">
  <option value="199.00" label="Gold">Gold</option>
  <option value="150.00" label="Silver">Silver</option>
  <option value="75.00" label="Bronze">Bronze</option>
</select>
  </div>
  <div class="months">
<select name="months" id="months-bronze">
  <option value="£75.00" label="1 month">1 month Bronze</option>
  <option value="£112.50" label="2 months">2 months Bronze</option>
</select>
</div>
<div class="months">
<select name="months" id="months-silver">
  <option value="£150.00" label="1 month">1 month Silver</option>
  <option value="£225.00" label="2 months">2 months Silver</option>
</select>
</div>
<div class="months">
<select name="months" id="months-gold">
  <option value="£199.00" label="1 month">1 month Gold</option>
  <option value="£298.50" label="2 months">2 months Gold</option>
</select>
</div>
<button type="button" onclick="calculatePrice();showDiv();">Calculate</button>
</form>

我目前拥有的（有效）是以下内容，但它不做我需要做的事情，这只是成本上的成本，因此，无论包装类型如何，成本都将相同（除了每个软件包的初始成本不同）：

<form name="costcalculator">
  <div class="package-type">
<select name="packageType" id="packageType">
  <option value="199.00" label="Gold">Gold</option>
  <option value="150.00" label="Silver">Silver</option>
  <option value="75.00" label="Bronze">Bronze</option>
</select>
  </div>
  <div class="months">
<select name="months" id="months">
  <option value="100.00" label="1 month">1 month</option>
  <option value="200.75" label="2 months">2 months</option>
  <option value="275.25" label="3 months">3 months</option>
  <option value="349.00" label="4 months">4 months</option>
  <option value="369.99" label="5 months">5 months</option>
  <option value="450.00" label="6 months">6 months</option>
</select>
</div>
<button type="button" onclick="calculatePrice();showDiv();">Calculate</button>
</form>

和JavaScript如下：

function calculatePrice(costcalculator){
  var elt = document.getElementById("packageType");
  var package = elt.options[elt.selectedIndex].value;
  var elt = document.getElementById("months");
  var months = elt.options[elt.selectedIndex].value;
  package = parseFloat(package);
  months = parseFloat(months);
  var total = package+months; 
  document.getElementById("TotalPrice").value=total;
}

所以我以为我几乎在上面有工作代码，但是我越涉及它，我就越意识到它的路程。

只需要一种方法，当用户选择第一个下拉菜单中的软件包类型时，那么包含月份的第二个下拉菜单将（幕后）填充新的成本，然后用户选择编号数字几个月，然后如果用户决定选择最后一个软件包，则第二个下拉菜单将再次刷新，但是背景中的成本不同。

根据04FS的注释，这是一个简单的解决方案。数据结构具有包装名称作为密钥，以便于查找。它具有基本价格（在第一个月），然后是额外的几个月价格，因此可以轻松计算总价。

html标记：

<form name="costcalculator">
  <div class="package-type">
    <select name="packageType" id="packageType" onchange="setMonths(this.value)">
      <option value="gold">Gold</option>
      <option value="silver">Silver</option>
      <option value="bronze">Bronze</option>
    </select>
  </div>
  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
      <option value="4">4 months</option>
      <option value="5">5 months</option>
      <option value="6">6 months</option>
      <option value="7">7 months</option>
      <option value="8">8 months</option>
      <option value="9">9 months</option>
      <option value="10">10 months</option>
      <option value="11">11 months</option>
      <option value="12">12 months</option>
    </select>
  </div>
  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

JavaScript代码：

var costs = {
    'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12},
    'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12},
    'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2}
};
function setMonths(package)
{
    var maxMonths = costs[package].maxMonths;
    document.getElementById("months").innerHTML = ''; // Clear all options
    for (var i = 1; i<=maxMonths; i++){
       var opt = document.createElement('option');
       opt.value = i;
       opt.innerHTML = i +  (i > 1 ? ' months' : ' month');
       document.getElementById('months').appendChild(opt);
    }
}
function calculatePrice()
{
  var package = document.getElementById('packageType').value;
  var months = document.getElementById('months').value;
  var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price.toFixed(2);
}

工作样本：

https://jsfiddle.net/td3j5frn/

或，您可以去：

//data model
var membershipPlans = {
  silver: {'1mo': 150, '2mo': 225, '3mo': 300},
  gold: {'1mo': 199, '2mo': 298.5, '3mo': 398}
};
//don't punish me for that with downvotes , please :)
Array.prototype.unique = function() {
  const resArr = [];
  this.forEach(entry => {
    if(resArr.indexOf(entry) == -1) resArr.push(entry);
  })
  return resArr;
};
//populate the view with possible options
const inputFields = {
  package: document.getElementById('package'),
  duration: document.getElementById('duration')
};
const cost = document.getElementById('cost');
inputFields.package.innerHTML = Object.keys(membershipPlans).sort().reduce((options, option) => options+=`<option value="${option}">${option}</option>`,'<option value="" selected disabled></option>');
inputFields.duration.innerHTML = Object.values(membershipPlans).map(entry => Object.keys(entry)).flat().unique().reduce((options, option) => options+=`<option value="${option}">${option}</option>`,'<option value="" selected disabled></option>');
//listen for input changes and display the cost
Object.values(inputFields).forEach(inputField => {
  inputField.addEventListener('change', ()=> 
    cost.innerHTML =  Object.values(inputFields).every(inputField => inputField.value !='') ? membershipPlans[inputFields.package.value][inputFields.duration.value]+'&nbsp&pound' : '-&nbsp&pound')
});

<div id="wrapper">
<span>Pick your </span>
<br>
<label>package:</label>
<select id="package" class="calcInput"></select>
<label>duration:</label>
<select id="duration" class="calcInput"></select>
<br>
<span>Your cost is:</span>
<br>
<span id="cost">-&nbsp&pound</span>
</div>

使用JavaScript的成本计算器 - 高级

相关内容

最新更新

热门标签：