我用逗号十进制分隔符遇到数字问题

时间:2019-08-13 08:51:11

标签: javascript jquery math

我有一个脚本来计算淋浴柱可以节省的水,但是当我将值的,更改为.时,它在Firefox和Edge中无法正常工作, 分别。

我已经尝试同时使用replaceparsefloat ...

我希望即使在输入中使用,.时,输出也一样。

function numberWithCommas(x) {
  return parseFloat(x.replace(",", ".").toString());
};

$('input').change(function() { // corre sempre que o valor muda
  var nrDuches = Number($('#duches').val()); // var para obter o value
  var tempEsp = Number($('#tempo').val()); //
  var prAgua = Number($('#agua').val());
  var prEnerg = Number($("#energia").val());

  $('#despesas2').html((((tempEsp * nrDuches * 365 * (prAgua / 1000)) + (tempEsp * 4.186 * 40 * 0.000278 * nrDuches * 365 * prEnerg))).toFixed(2)); // formula matemática para o output
  $('#copos').html(numberWithCommas(((tempEsp * nrDuches * 365)).toFixed())); // formula matemática para o output do nr de copo
  $('#energia2').html(numberWithCommas(((tempEsp * 4.186 * 40 * 0.000278 * nrDuches * 365)).toFixed())); // formula matemática para o output do numero de dias de aquecimento
});

完整代码:https://jsfiddle.net/rafaeltpires/t3a2kLnx/7/

2 个答案:

答案 0 :(得分:2)

问题是因为仅在 之后调用numberWithCommas()函数,您才用逗号作为小数点分隔符来检索值,并尝试使用该函数执行计算。您需要首先从input控件中读取值,然后首先执行此操作。试试这个:

function numberWithCommas(x) {
  return parseFloat(x.replace(",", ".").toString());
};

$('input').change(function() { // corre sempre que o valor muda
  var nrDuches = Number(numberWithCommas($('#duches').val()));
  var tempEsp = Number(numberWithCommas($('#tempo').val()));
  var prAgua = Number(numberWithCommas($('#agua').val()));
  var prEnerg = Number(numberWithCommas($("#energia").val()));

  $('#despesas2').html(((tempEsp * nrDuches * 365 * (prAgua / 1000)) + (tempEsp * 4.186 * 40 * 0.000278 * nrDuches * 365 * prEnerg)).toFixed(2));
  $('#copos').html((tempEsp * nrDuches * 365).toFixed());
  $('#energia2').html((tempEsp * 4.186 * 40 * 0.000278 * nrDuches * 365).toFixed());
});
body {
  background: lightblue;
}

.caixa {
  border: none;
  border-bottom: solid;
  border-bottom-width: 2px;
  width: 10%;
  background-color: rgba(0, 0, 0, 0);
  padding: 6px 5px;
  color: white;
  font-size: 28px;
  background: transparent;
}

.reduzido {
  width: 90px;
}

.reduzir {
  width: 75px;
}

.reduzir2 {
  width: 75px;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  padding: 15px 15px;
}

.blueTable .tableFootStyle .links {
  text-align: left;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  padding: 20px 40px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
  padding: 15px 15px;
}


/* RESPONSIVE CSS 992PX */

.mobilecalculadora {
  float: right;
  margin-top: -12%;
}

@media screen and (max-width: 992px) {
  .divTable.blueTable .divTableCell,
  .divTable.blueTable .divTableHead {
    padding: 15px 15px;
  }
  .blueTable .tableFootStyle {}
  .blueTable .tableFootStyle .links {
    text-align: left;
  }
  .blueTable .tableFootStyle .links a {
    padding: 20px 20px;
  }
  .blueTable.outerTableFooter {
    border-top: none;
  }
  .blueTable.outerTableFooter .tableFootStyle {
    padding: 15px 15px;
  }
  /* DivTable.com */
  .divTable {
    display: block;
  }
  .divTableRow {
    display: block;
  }
  .divTableHeading {
    display: block;
  }
  .divTableCell,
  .divTableHead {
    display: block;
  }
  .divTableHeading {
    display: block;
  }
  .divTableFoot {
    display: block;
  }
  .divTableBody {
    display: block;
  }
}

@media only screen and (max-width: 1000px) {
  .mobilecalculadora {
    font-size: 50% !important;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTable blueTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <div style="text-align: left;"><span style="color: #ffffff;"><label>Quantidade água fria até chegar água quente*:</label></span>
          <span style="color: #ffffff;"><input id="tempo" class="caixa reduzir2" name="tempo" required="" type="text" value="7.5" placeholder="Tempo de Espera" /></span></div>
      </div>
      <div class="divTableRow" style="text-align: left;">
        <div class="divTableCell" style="text-align: left;"><span style="color: #ffffff;"><label>Duches diários:</label></span>
          <span style="color: #ffffff;"><input id="duches" class="caixa reduzir" maxlength="2" name="duches" size="2" type="text" value="2" /></span></div>
      </div>
      <div class="divTableRow">
        <div class="divTableCell" style="text-align: left;"><span style="color: #ffffff;"><label>Custo energia:[€/kWh(th)]</label></span>
          <span style="color: #ffffff;"><input id="energia" class="caixa reduzir2" name="energia" required="" type="text" value="0.2" placeholder="Custo de Energia" /></span></div>
        <div class="divTableCell" style="text-align: left;"><span style="color: #ffffff;"><label>Custo água:[€/m3]</label></span>
          <span style="color: #ffffff;"><input id="agua" class="caixa reduzir2" name="agua" required="" type="text" value="4.5" placeholder="Custo água na sua zona" /></span></div>
        <div class="divTableCell" style="text-align: left;">
          <div class="mobilecalculadora">
            <h3 style="text-align: left;"><span style="color: #ffffff; font-size: 36pt;">Poupança Anual: <strong><span id="despesas2" class=""> 75.61</span>€</strong>
              </span>
            </h3>
            <h4 style="text-align: left;"><span style="color: #ffffff; font-size: 18pt;">Quantidade de água desperdiçada num ano <strong><span id="copos" class="">5475</span> </strong>Litros </span>
            </h4>
          </div>
        </div>
        <div class="divTableCell" style="text-align: left;"></div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分:1)

只需将Variables替换为不需要function numberwithCommas()

  var nrDuches = Number($('#duches').val().replace(',','.').toString());//
  var tempEsp = Number($('#tempo').val().replace(',','.').toString()); //
  var prAgua = Number($('#agua').val().replace(',','.').toString());
  var prEnerg = Number($("#energia").val().replace(',','.').toString());