<!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{
width: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;
//与商品有关的元素
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>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/12291.html