标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> img{width:100px; height:80px; border: 1px solid gray;} li{ float: left;} #oCart{ position:absolute; top: 0px; right: 0px; width: 200px; background: lightgray;} </style> <script> function addCookie(_name, _value, _day){ var d = new Date(); d.setDate(d.getDate()+_day); document.cookie=_name+"="+_value+"; expires="+d.toGMTString(); } function getCookie(_name){ var str=""; var col=document.cookie.split("; "); for(var i in col){ var arr=col[i].split("="); if(arr[0]==_name){ str=arr[1]; break; } } return str; } var db=[ {"id":1, "title":"a", "pic":"cart/1.jpg", "price":31}, {"id":2, "title":"b", "pic":"cart/2.jpg", "price":32}, {"id":3, "title":"c", "pic":"cart/3.jpg", "price":33}, {"id":4, "title":"d", "pic":"cart/4.jpg", "price":34}, {"id":5, "title":"e", "pic":"cart/5.jpg", "price":35}, {"id":6, "title":"f", "pic":"cart/6.jpg", "price":36}, {"id":7, "title":"g", "pic":"cart/7.jpg", "price":37}, {"id":8, "title":"h", "pic":"cart/8.jpg", "price":38} ]; //alert(db[0].pic) window.onload=function(){ var oUl=document.getElementById("oUl"); var str=""; for(var i=0; i<db.length; i++){ str+="<li><img src=‘"+db[i].pic+"‘ /><br>"+db[i].title+"<br>"+db[i].price+"元<br><a href=\"javascript:addCart("+db[i].id+");\">添加到购物车</a></li>"; } oUl.innerHTML=str; show(); } function getObj(id){ for(var i=0; i<db.length; i++){ if(db[i].id==id){ return db[i]; } } } function addCart(id){ var obj = getObj(id); var str = getCookie("cart"); var arr=isContain(str,id);//arr[0]当前商品是否已经在购物车中； arr[1]新的字符串，最终要保存到cookie里的字符串，|L|商品|L|商品|L|商品|L|商品..... if(arr[0]==true){ str=arr[1]; }else{ str=str+"|L|"+obj.id+"||"+obj.title+"||"+obj.pic+"||"+obj.price+"||1" } addCookie("cart", str, 10); show(); } function isContain(str, id){ //str 之前的cookie = |L|商品|L|商品|L|商品|L|商品|L|商品.... //id 指的是我当前点击的商品编号 var isC=false; var str2=""//最终要保存到cookie里的值，|L|商品|L|商品|L|商品|L|商品|L|商品.... //str = |L|商品|L|商品|L|商品|L|商品|L|商品.... var arr=str.split("|L|") //arr = [商品, 商品, 商品, 商品, 商品...] //arr[0] == 商品 == 编号||标题||图片||价格||数量 for(var i=1; i<arr.length; i++){ //arr[i] = 商品 = 编号||标题||图片||价格||数量 var col=arr[i].split("||") // col = [编号, 标题, 图片, 价格, 数量] // col[0]==编号 if(col[0]==id){ isC=true; /* 1 str2 = |L|编号||标题||图片||价格||数量(新) * */ str2=str2+"|L|"+col[0]+"||"+col[1]+"||"+col[2]+"||"+col[3]+"||"+(Number(col[4])+1) }else{ str2=str2+"|L|"+arr[i]; /* str2 = |L|编号||标题||图片||价格||数量(新)|L|编号||标题||图片||价格||数量 * */ } } //str2=|L|商品|L|商品|L|商品|L|商品.. return [isC, str2]; } function show(){ var txt=""; var str=getCookie("cart"); var arr=str.split("|L|"); for(var i=1; i<arr.length; i++){ var col=arr[i].split("||"); txt+="<li><img src=‘"+col[2]+"‘><br>"+col[1]+"<br>价格："+col[3]+"元<br>数量："+col[4]+"<br><a href=‘javascript:Delete("+col[0]+");‘>删除</a></li>"; } txt+="<li><a href=‘javascript:delCart();‘>清空购物车</a></li>" document.getElementById("oCart").innerHTML=txt; } function delCart(){ addCookie("cart", "", -10); show(); } function Delete(id){ var str2=""; var str = getCookie("cart");//|L|商品|L|商品|L|商品|L|商品|L|商品... var arr=str.split("|L|") for(var i=1; i<arr.length; i++){ //arr[i] = 商品 = 编号||标题||图片||价格||数量 var col=arr[i].split("||")// col = [编号, 标题, 图片, 价格, 数量] if(col[0]==id){ }else{ str2=str2+"|L|"+arr[i];//|L|编号||标题||图片||价格||数量|L|编号||标题||图片||价格||数量.... } } addCookie("cart", str2, 10); show(); } </script> </head> <body> <ul id="oUl"></ul> <ul id="oCart"></ul> </body> </html>
标签：
原文地址：http://www.cnblogs.com/thestudy/p/5628054.html
