带逗号的数字计算输出
我有一个计算应用程序,我正在建设,我有它的地方输入显示逗号和计算仍然可以运行,尽管逗号,但现在我无法得到输出显示与千分离器逗号。我尝试了几乎所有我能想到的。有人可以告诉我我可能会离开的地方吗?带逗号的数字计算输出
这里是我的脚本:
jQuery(document).ready(function($) {
// SHOW OUTPUT DIV ONLY WHEN ALL FIELDS ARE COMPLETED
$('#calc-top').bind('keyup change', function() {
var orderAmount = $('#orderAmt').val().replace('', ',');
if (orderAmount !== "" && $("#duration option:selected").val() !== "" && $("#debitFreq option:selected").val() !== "") {
$('div#calc-bottom').css('display', 'block');
} else {
$('div#calc-bottom').css('display', 'none');
}
});
});
jQuery(document).ready(function($){
$("#orderAmt").keyup(function(event) {
// skip for arrow keys
if (event.which >= 37 && event.which <= 40) {
event.preventDefault();
}
var $this = $(this);
var num = $this.val().replace(/,/gi, "");
var num2 = num.split(/(?=(?:[0-9]{3})+$)/).join(",");
console.log(num2);
// the following line has been simplified. Revision history contains original.
$this.val(num2);
});
});
// end jQuery
// CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS
function calculate() {
var orderAmt = parseFloat(document.getElementById("orderAmt").value.replace(/,/g, ''));
var duration = document.getElementById("duration").value || 0;
var debitFreq = document.getElementById("debitFreq").value || 0;
var outputAmt = document.getElementById('outputAmt') || 0;
var numPayments = document.getElementById('numPayments') || 0;
// CALCULATE NUMBER OF PAYMENTS
if (debitFreq == 7) {
numPayments = Math.floor(duration/7);
} else if (debitFreq == 30) {
numPayments = Math.floor(duration/30);
}
document.getElementById('numPayments').innerHTML = numPayments;
// CALCULATE PAYMENT AMOUNT
var stepA = (orderAmt/numPayments);
var stepB = Math.floor((((15/1000) * (duration/360)) * 12) * orderAmt) || 0;
var stepC;
if (debitFreq == 7) {
stepC = 0.10;
//} else if (debitFreq == 30) {
//stepC = 0.05;
} else {
stepC = 0;
}
var stepD = 0;
//if ((duration == 30) && (debitFreq == 30)) {
//stepD = 0.05;
//} else {
//stepD = 0;
//}
var stepE = stepC - stepD;
var stepF = Math.floor((((15/1000) * (duration/360)) * 12) * orderAmt) || 0;
var stepG = Math.ceil(stepE * stepF);
var stepH = stepB - stepG;
var stepI = stepH/numPayments;
var monthlyPayments = stepI + stepA;
outputAmt.innerHTML = monthlyPayments.toFixed(2) || 0;
// OUTPUT WILL SHOW CORRECT DEBIT FORMATS BASED ON USER INPUT (i.e. 'week', 'weeks', 'month', 'months')
var outputDefault1;
if (document.getElementById("debitFreq").value == 7) {
outputDefault1 = "week";
} else if (document.getElementById("debitFreq").value == 30) {
outputDefault1 = "month";
}
document.getElementById("outputTerm1").innerHTML = outputDefault1;
var outputDefault2;
if (document.getElementById("debitFreq").value == 7) {
outputDefault2 = "weeks";
} else if (document.getElementById("debitFreq").value == 30) {
outputDefault2 = "months";
}
document.getElementById("outputTerm2").innerHTML = outputDefault2;
}
// end calculate function
// ONLY ALLOW NUMERIC INPUT, NO ALPHA OR SPECIAL CHARACTERS EXCEPT COMMAS
function isNumberKey(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /^[0-9.,]+$/;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) {
theEvent.preventDefault();
}
}
}
// TRIGGER EVENTS WHEN THE USER ENTERS DATA
var userinputNum = document.getElementById("orderAmt");
userinputNum.oninput = calculate;
userinputNum.onkeypress = isNumberKey;
var userinputDays = document.getElementById("duration");
userinputDays.onchange = calculate;
var userinputFreq = document.getElementById("debitFreq");
userinputFreq.onchange = calculate;
这里是我的小提琴:http://jsfiddle.net/qo5b7z93/
任何帮助,不胜感激!
请看看这个updated FIDDLE,我觉得这应该做你需要的。
function FormatNumber(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var pattern = /(\d+)(\d{3})/;
while (pattern.test(x1)) {
x1 = x1.replace(pattern, '$1' + ',' + '$2');
}
return x1 + x2;
}
,完美的工作!当我之前测试过这个时,我已经在var模式上了。非常感谢你的洞察力! – AaronS
试试这个:
注:以下功能是可读性/可理解性的目的非常详细。你可能会想,以简化其生产
你会改变 outputAmt.innerHTML = monthlyPayments.toFixed(2) || 0
- >outputAmt.innerHTML = placeCommas(monthlyPayments);
function placeCommas(number) {
if (number !== null && number !== undefined) {
number = number.toFixed(2);
var splitNum = number.split(".");
var num = splitNum[0];
var decimals = splitNum[1];
var numArr = num.split("").reverse();
var commaArr = [];
for (var i = 0; i < numArr.length; i++) {
commaArr.push(numArr[i]);
if (i !== numArr.length - 1 && i % 3 === 2) {
commaArr.push(",");
}
}
num = commaArr.reverse().join("");
number = num + "." + decimals;
return number;
}
}
console.log(placeCommas(0));
console.log(placeCommas(10));
console.log(placeCommas(100));
console.log(placeCommas(1000));
console.log(placeCommas(10000));
console.log(placeCommas(100000));
console.log(placeCommas(1000000));
console.log(placeCommas(10000000));
console.log(placeCommas(100000000));
console.log(placeCommas(1000000000));
也不是那么人性化,以阻止使用箭头键,甚至任意键为这一问题。你的限制也消除了用shift-arrow选择文本的可能性,用backspace删除输入。当他们确实用鼠标移动光标位置时,只要他们键入,光标就会翻转到最后。这是不正常的行为,会让用户感到沮丧。
让他们输入他们想要的东西,只是清理,当他们退出输入框。这是更加用户友好的。
所以我建议只有当焦点离开输入栏应用数字格式,并作为重点再次进入尽快删除所有格式。
这里也是一个正则表达式replace
应用的格式一气呵成:
$(this).val()
.replace(/[^\d.]/gi, "") // clean-up
.replace(/\B(\d{3})(?=(?:\d{3})*(?:\.|$))/g, ',$1'); // format
这里是updated fiddle。
你可以使用http://numeraljs.com/,如果你不想这样做,那么1000除以你的结果和TRUNC这一点,那么由1000类似Math.trunc(值模量REST/1000)+ '' +(价值1000%).toFixed(2) – Keith
你也看到这一点:http://plugins.jquery.com/df-number-format/ –