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

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

<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" onclick="getInfo();" style="float:left;" /> <h1>商品1</h1><br/> <input type="image" alt="第二个商品" src="images/buy.gif" align="middle" onclick='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" onclick="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