javascript - 我在处理带有逗号小数分隔符的数字时遇到问题

Question

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

我已经尝试过使用replace、parsefloat，两者都...

即使在输入中使用 、 和 .，我希望输出也是相同的。

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/

Answer 1

问题是因为您仅在检索以逗号作为小数分隔符的值并尝试使用它执行计算之后才调用 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>