用js+cookie实现商城的购物车功能

页面上的添加功能主要就是两个按钮

<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" οnclick="getInfo();" style="float:left;" />
<h1>商品1</h1><br/>
<input type="image" alt="第二个商品" src="images/buy.gif" align="middle" οnclick='common.intoCart(88,"test",60,50,1);' style="float:left;" />
<h1>商品2</h1>

 

购物车页面

//页面加载时执行
window.onload = function() {
//更新购物车
getCartInfo();
};

/*
* 删除左右两端的空格
*/
function trim(str)
{
return str.replace(/(^\s*)|(\s*$)/g, '');
}

/*
* 验证是否是数字
*/
function isNum(str){
return str.match(/\D/)==null;
}

//设置商品数量
function setQuantity(goods_id,obj){
//判断输入的购买数量是否合法
var goods_count=trim(obj.value);

var next_obj=obj.nextSibling;

var old_goods_count=trim(next_obj.value);

//判断输入的购买数量是否合法
if(isNum(goods_count) && goods_count!= old_goods_count && goods_count!=0)
{
//更改商品的购买数量
common.updateQuantity(goods_id,goods_count);
}else{
//重置商品的购买数量
obj.value = old_goods_count;
}
}


//取得购物车信息
function getCartInfo(){

var str="";

var amount=0;

var _div = document.getElementById("goods_info");

//从Cookie中取出商品信息列表,并将其转化为数组
var arr = common.convertArray();

//如果数组是否为空
if(arr != "" && arr != null && arr != "null")
{
//将商品信息从数组中循环取出
for(i=0;i < arr.length;i++)
{
str+='<ul><li class="li_name">'+arr[i][1]+
'</li><li class="li_pice">'+arr[i][2]+
'</li><li class="li_pice">'+arr[i][3]+
'</li><li class="li_pice"><input type="text" value="'+arr[i][4]+
'" onBlur="setQuantity('+arr[i][0]+
',this);" /><INPUT type=hidden value='+arr[i][4]+
'></li><li class="li_del"><input type="image" src="images/trash.gif" οnclick="common.reMoveOne('+arr[i][0]+
');" /></li></ul>';

//计算商品总额
amount+=arr[i][3]*arr[i][4];
}

//替换页面
_div.innerHTML = str;

}else{
str = '<ul><li class="li_no">您还没有挑选商品</li></ul>';
//替换页面
_div.innerHTML = str;
}

//重置总金额
document.getElementById("amount").innerText = amount;
}
</script>

 

js页面太多了

demo地址

链接：http://pan.baidu.com/s/1cD1cbO 密码：9prl

转载于:https://www.cnblogs.com/937522zy/p/6692611.html