使用JavaScript的费用计算器-高级

时间：2019-02-18 10:03:00

标签： javascript html calculator

因此，我有一个HTML表单，其中包含两个下拉菜单和一个按钮。一个下拉菜单具有“包装类型”，由“金”，“银”和“铜”组成。第二个下拉菜单中的“月”有12个选项（最多12个月），然后是“计算”按钮。

现在，这是我希望我能很好解释的地方...

如果您选择“银色”和“ 1个月”，则费用为150.00英镑。

如果您选择“银色”和“ 2个月”，则费用为225.00英镑。

如果您选择“银色”和“ 3个月”，则费用为300英镑。

以此类推（最多12个月）。因此，上述的逻辑是第一个月为150.00英镑，再为其他月份为75英镑。

但是，如果您决定要拥有“金”包，将如下所示：

如果您选择“黄金”和“ 1个月”，则费用为199.00英镑。

如果您选择“黄金”和“ 2个月”，则价格为298.50英镑。

如果您选择“黄金”和“ 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;
}

所以我以为上面的工作代码已经差不多了，但是我越深入地了解它，就越能理解它。

它只需要一种方式，当用户在第一个下拉菜单中选择包裹类型时，包含月数的第二个下拉菜单将在用户选择编号之前（幕后）填充新费用。几个月，然后如果用户决定选择与上一个软件包不同的软件包，则第二个下拉菜单将再次刷新，但后台的费用有所不同。

2 个答案:

答案 0 :(得分：0)

这是根据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/

答案 1 :(得分：0)

或者，您也可以像这样

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

相关问题
最新问题