前端——简单购物车遇到的问题总结

写购物车项目时遇到问题总结

由字符串转化为浮点数。

  你会发现在淘宝中我们看到的金额是这样的。

  然而，当勾选项目后，如果你选择一个产品，那么最后的总价可以是没有进行任何变动的，但当你勾选更多的时候，前端要将数据进行转换并计算出总价，这进行了几次转化。
  那么，如何一步一步实现呢。

如何去掉“￥”符号。

function convertNumber(price){
	price=price.replace(/\￥|\,/g,'');
	price=parseFloat(price).toFixed(2);//将字符串转化为浮点数并保留小数点后两位。
	return price;
}

  这里用到了replace函数。

price=price.replace(/\￥|\,/g,'');

replace(/\￥|,/g,’’)意思就是将传进来的字符串里的“￥”和“，”去掉“。

如何将字符串转化为浮点数

price=parseFloat(price).toFixed(2);

这里是将字符串转化为浮点数并保留小数点后两位。

如何获取总价钱

下面是获取价格的函数

function getPrice(){
	var price;
	var oiid;
	var sumPrice=0;
    var sumNum=0;
	$(".cartProductItemIfSelected").each(function(){
		if("selectit"==$(this).attr("selectit")){//判断该商品是否被勾选
			oiid=$(this).attr("oiid");
			pid=$(".orderItemNumberSetting[oiid="+oiid+"]").attr("pid");
			num=$(".orderItemNumberSetting[pid="+pid+"]").val();//获取该商品的被选择的数量
			sumNum=parseInt(sumNum)+parseInt(num);//将数量转化为整形并相加
			if(isNaN(sumNum)){
				sumNum=1;
			}
	   		price=$(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text();//获取价格
			price=convertNumber(price);//转换成浮点数以便于计算
			sumPrice=parseFloat(sumPrice)+parseFloat(price);
			sumPrice=parseFloat(sumPrice).toFixed(2);
			creatSumPrice(sumPrice,sumNum);
		}
	  })
 }								   

对获取金额的运算问题

上面函数中的creatSumPrice(sumPrice,sumNum)函数

function creatSumPrice(sumPrice,sumMumber){
	document.getElementById("cartSumPrice").innerHTML="￥"+sumPrice;
	document.getElementById("cartTitlePrice").innerHTML="￥"+sumPrice;
	document.getElementById("cartSumNumber").innerHTML=sumMumber;
	
}

该函数是将最后又以”￥“金额展现在用户面前。

是不是想说，不是有个数量相乘吗？怎么从头都没有看到乘法。
原因在这儿。

当选中一个商品并且数量时

这个价格就会变化，代码实现如下

		var num= $(".orderItemNumberSetting[pid="+pid+"]").val();/获取到选中商品的数量
        num = parseInt(num);
        //对于数量的一系列判定
        if(isNaN(num))
			{num= 1;
            }
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
		$(".orderItemNumberSetting[pid="+pid+"]").val(num);
		price=convertNumber(price)*num;

那么在最后的遍历被选中的商品，直接相加后面的商品总金额就得到最后需要付的总金额~

键盘改写商品数量

超过库存怎么办？

用户输入0怎么办？

用户输入字符串怎么办？

		num = parseInt(num);
        if(isNaN(num))
			{num= 1;
            }
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
        $(".orderItemNumberSetting[pid="+pid+"]").val(num);

以上代码就是解决如上问题，最后将用户输入的错误信息进行改写。