<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>面向对象</title> <style type="text/css"> ul{ list-style-type:none; padding:0px; margin:0px; } #showCarBox{ 300px; height:300px; position:absolute; left:530px; top:150px; background:#d2d2d2; text-align:center; } #showCar ul li{ margin:0 auto; } #carJieSuan{ display:none; } #deleteProduct{ display:none; } #carJieSuan{ margin:0 auto; } #collectionList{ position:absolute; left:950px; top:180px; } </style> </head> <body> <select id="collectionList"> </select> <h2>产品信息</h2> <div id="Navigation"> <div id="nLeft"> </div> <div id="nCenter"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> </div> </div> <div id="goodShow"> <img alt="商品" id="goodsImg" /> <ul id="goodMessage"> <li>商品名</li> <li>价格</li> <li>产地</li> <li>尺寸</li> </ul> </div> <input type="button" value="加入购物车" id="addCar"/> <input type="button" value="立即购买" id="buy" /> <input type="button" value="收藏" id="collection" /> <div id="showCarBox"> <div id="showCar"> <h3>购物车中的商品信息</h3> </div> <input type="button" value="结算" id="carJieSuan" /> <input type="button" value="删除" id="deleteProduct" /> </div> <script type="text/javascript"> function $(id){ return document.getElementById(id); } //导航栏对象 function Navigation(){ } Navigation.prototype={ } //产品对象 function Product(imgSrc,name,price,origin,size) { //商品图片src this.imgSrc=imgSrc; //商品名字 this.name=name; //商品的价格 this.price=price; //商品的地址 this.origin=origin; //商品的尺寸 this.size=size; //与商品有关的dom节点 this.doms={ //收藏按钮 collection:$("collection"), //加入购物车按钮 addCar:$("addCar"), //购买按钮 buy:$("buy"), //商品图片 goodsImg:$("goodsImg"), //收藏列表 collectionList:$("collectionList") } } Product.prototype={ //加入购物车 addCar:function(){ //把产品加入购物车 car.products.push(this); //刷新购物车信息 car.bindDom(); alert("成功加入购物车!"); }, //立即购买 buy:function(){ alert("成功购买!"); }, //收藏 collection:function(){ //获得select里面option元素 var opts=this.doms.collectionList.getElementsByTagName("option"); //刚开始没有收藏 所以不存在重复问题 if(!opts[0]){ var option=document.createElement("option"); option.src=this.name; option.innerHTML=this.name; this.doms.collectionList.appendChild(option); alert("成功收藏!"); } else{ //循环检查是否有和当前添加商品名字一样的 for(var i=0,len=opts.length;i<len;i++){ if(opts[i].innerHTML==this.name){ alert("重复不能添加的了!"); } else{ var option=document.createElement("option"); option.src=this.name; option.innerHTML=this.name; this.doms.collectionList.appendChild(option); alert("成功收藏!"); } } } }, //绑定Dom bindDom:function(dom){ var str=''; str+='<img src='+this.imgSrc+' />'; str+="<ul>" str+='<li>商品名:'+this.name+'</li>' str+='<li>商品价格:'+this.price+'</li>' str+='<li>商品地址:'+this.origin+'</li>' str+='<li>商品尺寸:'+this.size+'</li>' str+='</ul>'; dom.innerHTML=str; }, //绑定事件 bindEvents:function(){ //这里的this指的是实例化的那个对象 var that=this; this.doms.addCar.onclick=function(){ //这里的this指的是dom元素的 所以不能使用addCar 用that保存作用域 that.addCar(); }; this.doms.buy.onclick=function(){ that.buy(); }; this.doms.collection.onclick=function(){ that.collection(); }; } } //购物车对象 function Car(){ //产品个数 this.product=0; //总价格 this.price=0; //产品列表 this.products=[]; //与购物车有关的元素 this.doms={ //商品展示div showCar:$("showCar"), //结算按钮 carJieSuan:$("carJieSuan"), //删除商品按钮 deleteProduct:$("deleteProduct") }; } Car.prototype={ //获得购物车中所有商品 getCarProducts:function(){ return $("carMessage").getElementsByTagName("li"); }, //付款方法 needPay:function(){ var sum=0; for(var i=0;i<this.products.length;i++){ //判断checkBox是否被选中 if($("CB"+i).checked){ sum+=parseInt(this.products[i].price); } } return sum; }, //删除购物车中商品方法 deleteProduct:function(){ //获得购物车中所有商品对象 var allProducts=this.getCarProducts(); //将购物车中选中的商品清除 for(var i=0;i<allProducts.length;i++){ if($("CB"+i).checked){ //删除products中的产品对象 this.products.splice(i,1); allProducts[i].style.display="none"; alert("成功删除选中的元素"); } } }, //得到购物车中产品数量 getSum:function(){ return this.products.length; }, //购物车绑定DOM bindDom:function(){ var str=""; str+='<ul id="carMessage"><h3>购物车中的信息</h3>'; for(var i=0;i<this.products.length;i++){ str+='<li><input type="checkBox" id="CB'+i+'"/>'+this.products[i].name+","+this.products[i].size+","+this.products[i].price+'</li>'; } str+='</ul>'; this.doms.carJieSuan.style.display="block"; this.doms.deleteProduct.style.display="block"; this.doms.showCar.innerHTML=str; }, //购物车绑定事件 bindEvents:function(){ var that=this; //购物车结算点击事件 this.doms.carJieSuan.onclick=function(){ alert('您成功支付了'+that.needPay()+'元'); }; //购物车删除选中商品事件 this.doms.deleteProduct.onclick=function(){ that.deleteProduct(); }; } } var kuzi=new Product("kuzi.png","欧美西装裤","3500","广州","xl"); kuzi.bindDom($("goodShow")); kuzi.bindEvents(); var car=new Car(); car.bindEvents(); </script> </body> </html>