<!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>Object Oriented</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>Product Information</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>Product name</li>
<li>Price</li>
<li>Origin</li>
<li>Size</li>
</ul>
</div>
<input type="button" value="Add to cart" id="addCar"/>
<input type="button" value="立即购买" id="buy" />
<input type="button" value="收藏" id="collection" />
<div id="showCarBox">
<div id="showCar">
<h3>Item information in the shopping cart</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);
}
//navigation bar object
function Navigation(){
}
Navigation.prototype={
}
// product object
function Product(imgSrc,name,price,origin,size)
{
//Product image src
this.imgSrc=imgSrc;
// product name
this.name=name;
// price of the item
this.price=price;
//the address of the item
this.origin=origin;
// size of the item
this.size=size;
// elements related to the item
this.doms={
//favorite button
collection:$("collection"),
//Add to cart button
addCar:$("addCar"),
//buy button
buy:$("buy"),
//product picture
goodsImg:$("goodsImg"),
//Favorites list
collectionList:$("collectionList")
}
}
Product.prototype={
//add to Shopping Cart
addCar:function(){
// add product to cart
car.products.push(this);
//Refresh the shopping cart information
car.bindDom();
alert("Successfully added to cart!");
},
//Buy now
buy:function(){
alert("Successful purchase!");
},
//collect
collection:function(){
//Get the option element in the select
var opts=this.doms.collectionList.getElementsByTagName("option");
//There is no collection at the beginning, so there is no duplication problem
if(!opts[0]){
var option=document.createElement("option");
option.src=this.name;
option.innerHTML=this.name;
this.doms.collectionList.appendChild(option);
alert("Successful collection!");
}
else{
//loop to check whether there is the same name as the currently added product
for(var i=0,len=opts.length;i<len;i++){
if(opts[i].innerHTML==this.name){
alert("Duplicate can't be added!");
}
else{
var option=document.createElement("option");
option.src=this.name;
option.innerHTML=this.name;
this.doms.collectionList.appendChild(option);
alert("Successful collection!");
}
}
}
},
//Bind Dom
bindDom:function(dom){
var str = '';
str+='<img src='+this.imgSrc+' />';
str+="<ul>"
str+='<li>商品名:'+this.name+'</li>'
str+='<li>Item price:'+this.price+'</li>'
str+='<li>Product address:'+this.origin+'</li>'
str+='<li>Item size:'+this.size+'</li>'
str+='</ul>';
dom.innerHTML = str;
},
// bind event
bindEvents: function () {
//here this refers to the object that was instantiated
var that=this;
this.doms.addCar.onclick=function(){
//here this refers to the dom element, so you can't use addCar to save the scope with that
that.addCar();
};
this.doms.buy.onclick=function(){
that.buy();
};
this.doms.collection.onclick=function(){
that.collection();
};
}
}
// shopping cart object
function Car(){
//Number of products
this.product=0;
//Total cost
this.price=0;
//Product List
this.products=[];
// elements related to the shopping cart
this.doms={
//Product display div
showCar:$("showCar"),
// checkout button
carJieSuan:$("carJieSuan"),
// delete item button
deleteProduct:$("deleteProduct")
};
}
Car.prototype={
// get all the items in the cart
getCarProducts:function(){
return $("carMessage").getElementsByTagName("li");
},
//Payment methods
needPay:function(){
var sum = 0;
for(var i=0;i<this.products.length;i++){
/ / Determine whether the checkBox is selected
if($("CB"+i).checked){
sum+=parseInt(this.products[i].price);
}
}
return sum;
},
//Remove items in the shopping cart method
deleteProduct:function(){
//Get all item objects in the shopping cart
var allProducts=this.getCarProducts();
// clear the selected items in the shopping cart
for(var i=0;i<allProducts.length;i++){
if($("CB"+i).checked){
//delete the product object in products
this.products.splice(i,1);
allProducts[i].style.display="none";
alert("Successfully removed the selected element");
}
}
},
// get the number of products in the cart
getSum:function(){
return this.products.length;
},
//The shopping cart is bound to the DOM
bindDom:function(){
var str="";
str+='<ul id="carMessage"><h3>Message in cart</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;
},
// shopping cart binding event
bindEvents: function () {
var that=this;
// shopping cart checkout click event
this.doms.carJieSuan.onclick=function(){
alert('You paid successfully'+that.needPay()+'yuan');
};
//Shopping cart delete selected item event
this.doms.deleteProduct.onclick=function(){
that.deleteProduct();
};
}
}
var kuzi=new Product("kuzi.png","European and American suit pants","3500","Guangzhou","xl");
kuzi.bindDom($("goodShow"));
kuzi.bindEvents();
var car=new Car();
car.bindEvents ();
</script>
</body>
</html>