我有一个脚本来计算淋浴柱可以节省的水,但是当我将值的,
更改为.
时,它在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
});
答案 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());