如何在进行更改时计算票据/硬币的数量?

时间:2016-10-30 21:27:52

标签: javascript jquery html

我想在进行更改时计算硬币数量。我的代码问题是,它不适用于最后的硬币(1cent,2cent),尽管我在我的代码中实现了它们。

Link to the code

我的HTML代码

  <input type="number" class="calculate" id="moneytochange" placeholder="€">
  <p id="e500"> </p>
  <p id="e200"> </p>
  <p id="e100"> </p>
  <p id="e50"> </p>
  <p id="e20"> </p>
  <p id="e10"> </p>
  <p id="e5"> </p>
  <p id="e2"> </p>
  <p id="e1"> </p>
  <p id="e05"> </p>
  <p id="e02"> </p>
  <p id="e01"> </p>
  <p id="e005"> </p>
  <p id="e002"> </p>
  <p id="e001"> </p>

(&#34; e&#34;因为&#34; e&#34;欧元)

我的jquery代码

$(document).ready(function(){
  $(".calculate").bind("keyup change input paste", function(){

  var billsAndCoins = [500, 200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1,   0.05, 0.02, 0.01];
  var number = {};

  var money = $("#moneytochange").val();
  billsAndCoins.forEach(function(i) {
    number[i] = (money - (money % i))/ i;
    $("#e" + i.toString().replace('.','')).html(number[i] + " * " + i);
    money = money % i;
    });

  });
});

我的css代码

input {
text-align: center;
font-size: 3vw;
margin: 0 17%;
width: 60%;
border: none;
border-bottom: 4px solid #7C4DFF;
outline: none;
font-family: 'Raleway', sans-serif;
padding: 1% 3% 1% 3%;
transition: border-radius 0.3s ease-out;
opacity: 50%;
}
input:focus {
border-radius: 1vw;
}

2 个答案:

答案 0 :(得分:0)

我会责怪JavaScript自动舍入它。

使用美分而不是整个欧元的消费者,然后将其除以100以获得欧元。

我从经验中知道,一些杂货店也使用美分而不是全部欧元 - 整数优先于小数,这是常见的事情

$(document).ready(function(){
  $(".calculate").bind("keyup change input paste", function(){

    var billsAndCoins = [50000, 20000, 10000, 5000, 2000, 1000, 500, 200, 100, 50, 20, 10, 5, 2, 1];
    var number = {};

    var money = $("#moneytochange").val();
    $("#change").html("");
    var cents = money * 100;
    billsAndCoins.forEach(function(entry) {
        number[entry] = (cents - (cents % entry))/ entry;
        if(number[entry]>0) $("#change").append("<p>" + entry/100 + " * " + number[entry] + "</p>")
            cents = cents % entry;
      });
   });
});

http://jsfiddle.net/eLzfd6tt/2/

答案 1 :(得分:0)

因为浮动点不准确而导致美分失败的原因是剩余的钱变为0.0099999999856而不是0.01。

以下是您的代码转换为使用整数分数而不是小数进行计算,从而避免了浮点问题:

&#13;
&#13;
$(document).ready(function(){
  $(".calculate").bind("keyup change input paste", function(){

    var billsAndCoins = [50000, 20000, 10000, 5000, 2000, 1000, 500, 200, 100, 50, 20, 10, 5, 2, 1];
    var number = {};

    var money = Math.round($("#moneytochange").val() * 100);
    billsAndCoins.forEach(function(entry) {
      number[entry] = (money - money % entry)/ entry;
      $("#e" + entry).html(number[entry] + " * " + (entry/100));
      money = money % entry;
    });

  });
});
&#13;
input {
	text-align: center;
	font-size: 3vw;
	margin: 0 17%;
	width: 60%;
	border: none;
	border-bottom: 4px solid #7C4DFF;
	outline: none;
	font-family: 'Raleway', sans-serif;
	padding: 1% 3% 1% 3%;
	transition: border-radius 0.3s ease-out;
	opacity: 50%;
}
input:focus {
	border-radius: 1vw;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="calculate" id="moneytochange" placeholder="€">
<p id="e50000">0 *</p>
<p id="e20000">0 *</p>
<p id="e10000">0 *</p>
<p id="e5000">0 *</p>
<p id="e2000">0 *</p>
<p id="e1000">0 *</p>
<p id="e500">0 *</p>
<p id="e200">0 *</p>
<p id="e100">0 *</p>
<p id="e50">0 *</p>
<p id="e20">0 *</p>
<p id="e10">0 *</p>
<p id="e5">0 *</p>
<p id="e2">0 *</p>
<p id="e1">0 *</p>
&#13;
&#13;
&#13;