JQuery百分比计算

时间：2017-03-29 09:58:39

标签： jquery

我试图通过计算的两个数字来计算和输出百分比，但是它失败了

并且没有用，HTML输出完全空白，任何提示我们如何显示生成的2个数字的百分比？

//被修改

我也尝试了val，但它没有用..

我会附上代码段

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#print-area').click(function() {
    window.print();
  });
  calcSumWatt('n');
  calcKWhDay('n');
  calcYearly('n');
  calcDepreciation('n');
  calcSumWatt('c');
  calcKWhDay('c');
  calcYearly('c');
  calcDepreciation('c');
  calcPercentage('c');

  $("input").keyup(function() {
    if ($.isNumeric($(this).val())) {
      if ($(this).attr('id') == 'c-numlamp' || $(this).attr('id') == 'n-numlamp') {
        var group = $(this).attr('id').substring(0, 1);
        if (group == 'n') {
          $('#c-numlamp').val($(this).val());
        } else {
          $('#n-numlamp').val($(this).val());
        }
      }
      if ($(this).attr('class') == 'hoursPerDay') {
        var group = $(this).attr('id').substring(0, 1);
        if (group == 'n') {
          $('#c-hours').val($(this).val());
        } else {
          $('#n-hours').val($(this).val());
        }
      }
      var group = $(this).attr('id').substring(0, 1);

      if ($(this).attr('class') == 'sumWatt') {
        calcSumWatt('n');
        calcSumWatt('c');
      } else if ($(this).attr('class') == 'hoursPerDay') {
        calcKWhDay('n');
        calcKWhDay('c');
      } else if ($(this).attr('class') == 'daysPerYear') {
        calcYearly(group);
      } else if ($(this).attr('class') == 'totalAmount') {
        calcDepreciation();
      }
    }
  });
});

function calcSumWatt(group) {

  if ($('#' + group + '-numlamp').val() && $('#' + group + '-wattlamp').val()) {
    $('#' + group + '-watts').text($('#' + group + '-numlamp').val() * $('#' + group + '-wattlamp').val());
    calcKWhDay(group);
  }

}

function calcKWhDay(group) {

  if ($('#' + group + '-watts').text() && $('#' + group + '-hours').val()) {
    $('#' + group + '-watts-day').text($('#' + group + '-watts').text() * $('#' + group + '-hours').val());
    calcDailyCons(group);
  }

}

function calcDailyCons(group) {
  var price = Number($('#' + group + '-watts-price').text().replace(/[^0-9\.]+/g, "").replace(".", ",") / 100);
  $('#' + group + '-watts-consumtion').text((($('#' + group + '-watts-day').text() * price * 30) / 1000).toFixed(2).replace(".", ",") + ' €');
  calcYearly(group);
}

function calcYearly(group) {
  if ($('#' + group + '-watts-consumtion').text() && $('#' + group + '-days').val()) {
    $('#' + group + '-yearlyCost').text(($('#' + group + '-watts-consumtion').text().replace(/[^0-9\.]+/g, "") * 12 / 100).toFixed(2).replace(".", ",") + ' €');
    calcProfits();
  }
}

function calcProfits() {
  if ($('#c-yearlyCost').text() && $('#n-yearlyCost').text()) {
    $('#y-yearly-profit').text((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100)).toFixed(2).replace(".", ",") + ' €');
    calcDepreciation();
  }
}

function calcDepreciation() {
  if ($('#d-watt').val() && $('#n-numlamp').val()) {
    var months = Math.ceil(($('#d-watt').val() * $('#n-numlamp').val() * 12 * 100) / $('#y-yearly-profit').text().replace(/[^0-9\.]+/g, ""));
    $('#d-months').text(months);
  }
}

function calcPercentage() {
  if ($('#c-yearlyCost').text() && $('#n-yearlyCost').text()) {
    $('#calcpercentage').val(Math.ceil((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 / $('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 * 100)).toFixed(2)) + ' %');
    calcDepreciation();
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div id="current" class="half">
  <div class="title_big">
    <p>Current status</p>
  </div>
  <div class="input-container">
    <div class="one-forth">
      <p class="plain">Count of watt</p>
      <input type="text" class="sumWatt" id="c-numlamp" value="5">
    </div>
    <div class="one-forth">
      <p class="plain">Current watt</p>
      <input type="text" class="sumWatt" id="c-wattlamp" value="50">
    </div>
    <div class="one-forth">
      <p class="plain">Hours</p>
      <input type="text" class="hoursPerDay" id="c-hours" value="10">
    </div>
    <div class="one-forth">
      <input type="text" class="daysPerYear" id="c-days" value="365" readonly>
    </div>
  </div>
  <div class="full">
    <table>
      <tr>
        <td class="three-forths">Total</td>
        <td class="one-forth" id="c-watts"></td>
      </tr>
      <tr>
        <td class="three-forths">Current Consumtion</td>
        <td class="one-forth" id="c-watts-day"></td>
      </tr>
      <tr>
        <td class="three-forths">Cost</td>
        <td class="one-forth" id="c-watts-price">0,13</td>
      </tr>
      <tr>
        <td class="three-forths">Current</td>
        <td class="one-forth" id="c-watts-consumtion"></td>
      </tr>
    </table>
  </div>
</div>


<div id="new" class="half">
  <div class="title_big">
    <p>New</p>
  </div>
  <div class="input-container">
    <div class="one-forth">
      <p class="plain">New Count</p>
      <input type="text" class="sumWatt" id="n-numlamp" value="5">
    </div>
    <div class="one-forth">
      <p class="plain">Each Consumption</p>
      <input type="text" class="sumWatt" id="n-wattlamp" value="5">
    </div>
    <div class="one-forth">
      <p class="plain">Hours</p>
      <input type="text" class="hoursPerDay" id="n-hours" value="10">
    </div>
    <div class="one-forth">
      <input type="text" class="daysPerYear" id="n-days" value="365" readonly>
    </div>
  </div>
  <div class="full">
    <table>
      <tr>
        <td class="three-forths">NEW</td>
        <td class="one-forth" id="n-watts"></td>
      </tr>
      <tr>
        <td class="three-forths">Daily</td>
        <td class="one-forth" id="n-watts-day"></td>
      </tr>
      <tr>
        <td class="three-forths">Current</td>
        <td class="one-forth" id="n-watts-price">0,13</td>
      </tr>
      <tr>
        <td class="three-forths">Months</td>
        <td class="one-forth" id="n-watts-consumtion"></td>
      </tr>
    </table>
  </div>
</div>


<div id="sum" class="full">
  <div class="two-thirds">
    <div class="title_big">
      <p>Calculation</p>
    </div>
    <table>
      <tr style="border-bottom: none;">
        <td class="three-forths"></td>
        <td class="one-forth" id="y-monthly-profit"> </td>
      </tr>
      <tr>
        <td class="three-forths">Current</td>
        <td class="one-forth" id="c-yearlyCost"></td>
      </tr>
      <tr>
        <td class="three-forths">Will be</td>
        <td class="one-forth" id="n-yearlyCost"></td>
      </tr>
      <tr>
        <td class="three-forths">Every Year</td>
        <td class="one-forth" id="y-yearly-profit"></td>
      </tr>
      <br>

      <tr>
        <td class="three-forths">Percent</td>
        <td class="one-forth" id="calcpercentage"></td>
      </tr>


    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：-1)

现在你只是像JavaScript变量一样，你不应该使用选择器。为了能够将某些值/文本附加到HTML元素，您必须使用text()或html()方法。另外，我认为%符号的连接应该在Math.ceil()之外。

所以改变这个：

$('#calcpercentage') = Math.ceil((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 / $('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 * 100)).toFixed(2) + ' %');

到此：

$('#calcpercentage').html(Math.ceil((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 / $('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 * 100)).toFixed(2)) + ' %');

如果$('#calcpercentage')元素是输入，则必须使用val()代替html()，如下所示：

$('#calcpercentage').val(Math.ceil((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 / $('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 * 100)).toFixed(2))  + ' %');

工作片段：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#print-area').click(function() {
    window.print();
  });
  calcSumWatt('n');
  calcKWhDay('n');
  calcYearly('n');
  calcDepreciation('n');
  calcSumWatt('c');
  calcKWhDay('c');
  calcYearly('c');
  calcDepreciation('c');
  calcPercentage('c');

  $("input").keyup(function() {
  calcPercentage('c');
    if ($.isNumeric($(this).val())) {
      if ($(this).attr('id') == 'c-numlamp' || $(this).attr('id') == 'n-numlamp') {
        var group = $(this).attr('id').substring(0, 1);
        if (group == 'n') {
          $('#c-numlamp').val($(this).val());
        } else {
          $('#n-numlamp').val($(this).val());
        }
      }
      if ($(this).attr('class') == 'hoursPerDay') {
        var group = $(this).attr('id').substring(0, 1);
        if (group == 'n') {
          $('#c-hours').val($(this).val());
        } else {
          $('#n-hours').val($(this).val());
        }
      }
      var group = $(this).attr('id').substring(0, 1);

      if ($(this).attr('class') == 'sumWatt') {
        calcSumWatt('n');
        calcSumWatt('c');
      } else if ($(this).attr('class') == 'hoursPerDay') {
        calcKWhDay('n');
        calcKWhDay('c');
      } else if ($(this).attr('class') == 'daysPerYear') {
        calcYearly(group);
      } else if ($(this).attr('class') == 'totalAmount') {
        calcDepreciation();
      }
    }
  });
});

function calcSumWatt(group) {

  if ($('#' + group + '-numlamp').val() && $('#' + group + '-wattlamp').val()) {
    $('#' + group + '-watts').text($('#' + group + '-numlamp').val() * $('#' + group + '-wattlamp').val());
    calcKWhDay(group);
  }

}

function calcKWhDay(group) {

  if ($('#' + group + '-watts').text() && $('#' + group + '-hours').val()) {
    $('#' + group + '-watts-day').text($('#' + group + '-watts').text() * $('#' + group + '-hours').val());
    calcDailyCons(group);
  }

}

function calcDailyCons(group) {
  var price = Number($('#' + group + '-watts-price').text().replace(/[^0-9\.]+/g, "").replace(".", ",") / 100);
  $('#' + group + '-watts-consumtion').text((($('#' + group + '-watts-day').text() * price * 30) / 1000).toFixed(2).replace(".", ",") + ' €');
  calcYearly(group);
}

function calcYearly(group) {
  if ($('#' + group + '-watts-consumtion').text() && $('#' + group + '-days').val()) {
    $('#' + group + '-yearlyCost').text(($('#' + group + '-watts-consumtion').text().replace(/[^0-9\.]+/g, "") * 12 / 100).toFixed(2).replace(".", ",") + ' €');
    calcProfits();
  }
}

function calcProfits() {
  if ($('#c-yearlyCost').text() && $('#n-yearlyCost').text()) {
    $('#y-yearly-profit').text((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100)).toFixed(2).replace(".", ",") + ' €');
    calcDepreciation();
  }
}

function calcDepreciation() {
  if ($('#d-watt').val() && $('#n-numlamp').val()) {
    var months = Math.ceil(($('#d-watt').val() * $('#n-numlamp').val() * 12 * 100) / $('#y-yearly-profit').text().replace(/[^0-9\.]+/g, ""));
    $('#d-months').text(months);
  }
}

function calcPercentage() {
  if ($('#c-yearlyCost').text() && $('#n-yearlyCost').text()) {
    $('#calcpercentage').html(Math.ceil((($('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 - $('#n-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 / $('#c-yearlyCost').text().replace(/[^0-9\.]+/g, "") / 100 * 100)).toFixed(2)) + ' %');
    calcDepreciation();
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current" class="half">
  <div class="title_big">
    <p>Current status</p>
  </div>
  <div class="input-container">
    <div class="one-forth">
      <p class="plain">Count of watt</p>
      <input type="text" class="sumWatt" id="c-numlamp" value="5">
    </div>
    <div class="one-forth">
      <p class="plain">Current watt</p>
      <input type="text" class="sumWatt" id="c-wattlamp" value="50">
    </div>
    <div class="one-forth">
      <p class="plain">Hours</p>
      <input type="text" class="hoursPerDay" id="c-hours" value="10">
    </div>
    <div class="one-forth">
      <input type="text" class="daysPerYear" id="c-days" value="365" readonly>
    </div>
  </div>
  <div class="full">
    <table>
      <tr>
        <td class="three-forths">Total</td>
        <td class="one-forth" id="c-watts"></td>
      </tr>
      <tr>
        <td class="three-forths">Current Consumtion</td>
        <td class="one-forth" id="c-watts-day"></td>
      </tr>
      <tr>
        <td class="three-forths">Cost</td>
        <td class="one-forth" id="c-watts-price">0,13</td>
      </tr>
      <tr>
        <td class="three-forths">Current</td>
        <td class="one-forth" id="c-watts-consumtion"></td>
      </tr>
    </table>
  </div>
</div>


<div id="new" class="half">
  <div class="title_big">
    <p>New</p>
  </div>
  <div class="input-container">
    <div class="one-forth">
      <p class="plain">New Count</p>
      <input type="text" class="sumWatt" id="n-numlamp" value="5">
    </div>
    <div class="one-forth">
      <p class="plain">Each Consumption</p>
      <input type="text" class="sumWatt" id="n-wattlamp" value="5">
    </div>
    <div class="one-forth">
      <p class="plain">Hours</p>
      <input type="text" class="hoursPerDay" id="n-hours" value="10">
    </div>
    <div class="one-forth">
      <input type="text" class="daysPerYear" id="n-days" value="365" readonly>
    </div>
  </div>
  <div class="full">
    <table>
      <tr>
        <td class="three-forths">NEW</td>
        <td class="one-forth" id="n-watts"></td>
      </tr>
      <tr>
        <td class="three-forths">Daily</td>
        <td class="one-forth" id="n-watts-day"></td>
      </tr>
      <tr>
        <td class="three-forths">Current</td>
        <td class="one-forth" id="n-watts-price">0,13</td>
      </tr>
      <tr>
        <td class="three-forths">Months</td>
        <td class="one-forth" id="n-watts-consumtion"></td>
      </tr>
    </table>
  </div>
</div>


<div id="sum" class="full">
  <div class="two-thirds">
    <div class="title_big">
      <p>Calculation</p>
    </div>
    <table>
      <tr style="border-bottom: none;">
        <td class="three-forths"></td>
        <td class="one-forth" id="y-monthly-profit"> </td>
      </tr>
      <tr>
        <td class="three-forths">Current</td>
        <td class="one-forth" id="c-yearlyCost"></td>
      </tr>
      <tr>
        <td class="three-forths">Will be</td>
        <td class="one-forth" id="n-yearlyCost"></td>
      </tr>
      <tr>
        <td class="three-forths">Every Year</td>
        <td class="one-forth" id="y-yearly-profit"></td>
      </tr>
      <br>

      <tr>
        <td class="three-forths">Percent</td>
        <td class="one-forth" id="calcpercentage"></td>
      </tr>


    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题