获取输入框的值，计算出的支付费用

谁践踏了优雅 2022-06-08 02:48 172阅读 0赞

在实践过程中，设计一个获取输入框的值，然后计算所需支付费用时，计算出来的费用总是不对。

如下图所示，是页面初始化完成的界面：

![Center][]

”支付费用“ 就是我们需要根据 “红包总额” 和“红包个数”计算出的值。

”支付费用“的计算规则是：若红包个数小于上限个数：费用=红包总额；若红包个数大于上限个数：

费用 = 红包总额+（红包个数-上限个数）\*0.1

jquery代码如下：

// 监听红包总额输入框值变化事件
    	$('#totalFee').on('input',function(e){
    		//获取红包总额
    		totalFee = $('#totalFee').val();
    		//计算支付费用
    		countPayFee();
    	});
    
    	// 监听红包个数输入框值变化
    	$('#redBagNum').on('input',function(e){
    		//在改变红包个数之前，要先输入红包总额
    		if( $('#totalFee').val() == undefined || $('#totalFee').val() == '' || $('#totalFee').val() == null ){
    			error_prompt_alert('请先输入红包总额');
    			return;
    		}
    		redBagCount = $('#redBagNum').val();
    		//计算支付费用
    		countPayFee();
    	});
    
        // 计算支付费用
        function countPayFee(){
        	if(redBagCount <= upLimiteNum){
    			pay = totalFee;
    		}else{
    			console.log(totalFee);
    			pay = totalFee + （redBagCount - upLimiteNum) * 0.1;
    		}
    		$('#payFee').text(pay);
        }

当红包总额输入框值变化或者红包个数输入框值变化时都要重新计算一遍支付费用，即函数ountPayFee()；

显示效果如下：

从上面可以看出计算结果不正确，因为红包总额10，红包个数31，那么支付费用应该是10.1元，才正确

出错原因：1、获取到输入框的值是字符串，即 totalFee = $('#totalFee').val();这里toyalFee保存的是一个字符串

2、同样redBagCount = $('#redBagNum').val(); redBagCount 保存的是一个字符串。

好，当我们利用公式计算费用时，即 pay = totalFee + （redBagCount - upLimiteNum) * 0.1;           因为totalFee是字符串，redBagCount是字符串，根据js加法规则，这里是对字符串的拼接，而不是加法运算 
     
    
    
     
     解决方法：将pay = totalFee + （redBagCount - upLimiteNum) * 0.1;改成
                       pay = parseFloat(totalFee) + (parseFloat(redBagCount) - parseFloat(upLimiteNum)) * 0.1;
                       即将值为字符串改成float类型。

[Center]: /images/20220608/0fc4b21955394daaa84c59d7e6a88f56.png