input输入框计算总和
1、效果:
2、代码:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<div style="width:300px">
总和:<input id="total" disabled="disabled" value="99"/>
<hr/>
<p class="this_container">
输入框1:<input name="money" value="10.01">
</p>
<p class="this_container">
输入框2:<input name="money" value="10.03">
</p>
<p class="this_container">
输入框3:<input name="money" value="1.06">
</p>
</div>
<script>
/* 方法1:离开输入框触发 */
/*$(function(){
$('.this_container input[name="money"]').blur('input propertychange',function(){
var sum = 0;
$(".this_container input[name='money']").each(function(){
//这样调用自定义的相加方法
value= $(this).val();
sum = accAdd(sum, value);
//或者通过自定义的Number属性add调用自定义方法
//var value = Number($(this).val());
//sum = value.add(sum);
});
console.log(sum);
$('input[disabled="disabled"]').val( sum );
});
});*/
/* 方法2:进入页面计算总和;并且监听输入框动态,实时计算总和 */
$(function(){
function getTotal(){
var sum = 0;
$('.this_container input[name="money"]').each(function(){
//这样调用自定义的相加方法
value= this.value;
sum = accAdd(sum, value);
//或者通过自定义的Number属性add调用自定义方法
/*var value = Number($(this).val());
sum = value.add(sum);*/
});
$('input[disabled="disabled"]').val( sum );
}
$('.this_container input[name="money"]').on("keyup", getTotal).trigger('keyup');
});
/**
** 加法函数,用来得到精确的加法结果
** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
** 调用:accAdd(arg1,arg2)
** 返回值:arg1加上arg2的精确结果
**/
function accAdd(arg1, arg2) {
var r1, r2, m, c;
try {
r1 = arg1.toString().split(".")[1].length;
}
catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
}
catch (e) {
r2 = 0;
}
c = Math.abs(r1 - r2);
m = Math.pow(10, Math.max(r1, r2));
if (c > 0) {
var cm = Math.pow(10, c);
if (r1 > r2) {
arg1 = Number(arg1.toString().replace(".", ""));
arg2 = Number(arg2.toString().replace(".", "")) * cm;
} else {
arg1 = Number(arg1.toString().replace(".", "")) * cm;
arg2 = Number(arg2.toString().replace(".", ""));
}
} else {
arg1 = Number(arg1.toString().replace(".", ""));
arg2 = Number(arg2.toString().replace(".", ""));
}
return (arg1 + arg2) / m;
}
//给Number类型增加一个add方法,调用起来更加方便。
Number.prototype.add = function (arg) {
return accAdd(arg, this);
}
</script>