如何创建带有折扣的计算功能?

时间:2019-03-23 07:47:07

标签: javascript function

我有一个基本的计算器来计算工作成本,但是我需要考虑折扣的不同价格。我需要计算每小时/每天/每月的费用。

我有三类工人(轻/中/最大装备)和三类时间表(8/12/24小时)。根据时间表,价格会有所不同。对于轻型75 $ / 24h,100 $ / 12h,110 $ / 8h。对于中型80 $ / 24h,130 $ / 12h,140 $ / 8h。最高为130 $ / 24h,150 $ / 12h,180 $ / 8h。

我每天计算每月费用没有问题,但是不知道如何在不同的时间表中使用不同的价格。

    <script type="text/javascript">
    function calculate() {
        var number = document.getElementsByName("number")[0].value;
        var equip = document.getElementsByName("equip")[0].value;
        var schedule = document.getElementsByName("schedule")[0].value;
        var day = (number * equip * schedule);
        var hour = (number  * equip);
        var month = (30.5 * equip * number * schedule);



    power = Math.round( day * 100 ) / 100;

        if(check(["number"])){
            document.getElementsByName("perday")[0].value = day + " $";
            document.getElementsByName("permonth")[0].value = month + " $";
            document.getElementsByName("perhour")[0].value = hour + " $";
        }

    }

    function check(elems){
        var f = true; 
        for(var i = 0; i < elems.length; i++){
            if(document.getElementsByName(elems[i])[0].value == ""){
                alert("enter all fields!");
                f = false;
                break;
            }
        }
        return f;
    }
    </script>





    <table border="0" cellpadding="1" cellspacing="0" style="width: 500px;">
    <tbody>

        <tr>
            <td>
                    number of employees
            </td>
            <td>
                <select name="number"><option value="1" selected>1</option> 
    <option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>
                <option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>
            </td>
        </tr>

        <tr>
            <td>
                    Equipment
            </td>
            <td>
                <select name="equip"><option value="75" selected>light</option><option value="80">medium</option><option value="130">maximum</option></select>
            </td>
        </tr>
        <tr>
            <td>
                   Schedule
            </td>
            <td>
                <select name="schedule"><option value="8" selected>8-hour</option><option value="12">12-hour</option><option value="24">24-hour</option></select>
            </td>
        </tr>



         <tr>
            <td colspan="2" align="left">
                <input type="button" onclick="calculate();" value="calculate price" />
            </td>
        </tr>
    </tbody>
</table>

    <div>cost per hour: <input name="perhour"/></div>
    <div>cost per day: <input name="perday"/></div>
    <div>cost per month: <input name="permonth"/></div>

https://jsfiddle.net/DOOOS/fdLxu4sv/17/

1 个答案:

答案 0 :(得分:1)

因此,您不想使用价格作为设备下拉菜单中的值,而是要使用设备类型。然后,您可以创建一个价格对象,并使用带有开关的函数来获取每台设备和时间表的价格。

我建议多读一些objectsarraysswitches。这样您就可以了解其工作原理。

function getPrice(equip, schedule) {
  var price = {
    light: [75, 100, 110],
    medium: [80, 130, 140],
    maxium: [130, 150, 180]
  };

  switch (schedule) {
    case '8':
      return price[equip][2];
    case '12':
      return price[equip][1];
    case '24':
      return price[equip][0];
  }
}

function calculate() {

  var number = document.getElementsByName("number")[0].value;
  var equip = document.getElementsByName("equip")[0].value;
  var schedule = document.getElementsByName("schedule")[0].value;
  var day = (number * getPrice(equip, schedule) * schedule);
  var hour = (number * getPrice(equip, schedule));
  var month = (30.5 * getPrice(equip, schedule) * number * schedule);



  power = Math.round(day * 100) / 100;

  if (check(["number"])) {
    document.getElementsByName("perday")[0].value = day + " $";
    document.getElementsByName("permonth")[0].value = month + " $";
    document.getElementsByName("perhour")[0].value = hour + " $";
  }

}

function check(elems) {
  var f = true;
  for (var i = 0; i < elems.length; i++) {
    if (document.getElementsByName(elems[i])[0].value == "") {
      alert("enter all fields!");
      f = false;
      break;
    }
  }
  return f;
}
<table border="0" cellpadding="1" cellspacing="0" style="width: 500px;">
  <tbody>

    <tr>
      <td>
        number of employees
      </td>
      <td>
        <select name="number">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        Equipment
      </td>
      <td>
        <select name="equip">
          <option value="light" selected>light</option>
          <option value="medium">medium</option>
          <option value="maximum">maximum</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        Schedule
      </td>
      <td>
        <select name="schedule">
          <option value="8" selected>8-hour</option>
          <option value="12">12-hour</option>
          <option value="24">24-hour</option>
        </select>
      </td>
    </tr>



    <tr>
      <td colspan="2" align="left">
        <input type="button" onclick="calculate();" value="calculate price" />
      </td>
    </tr>
  </tbody>
</table>

<div>cost per hour: <input name="perhour" /></div>
<div>cost per day: <input name="perday" /></div>
<div>cost pre month: <input name="permonth" /></div>