文章目录
写购物车项目时遇到问题总结
由字符串转化为浮点数。
你会发现在淘宝中我们看到的金额是这样的。
然而,当勾选项目后,如果你选择一个产品,那么最后的总价可以是没有进行任何变动的,但当你勾选更多的时候,前端要将数据进行转换并计算出总价,这进行了几次转化。
那么,如何一步一步实现呢。
如何去掉“¥”符号。
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);
以上代码就是解决如上问题,最后将用户输入的错误信息进行改写。