<!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;

	//与商品有关的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>

　　

js面向对象写页面的更多相关文章

  1. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  2. JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)

    有时候我们在前台需要对序号进行处理,我们需要将JS变量写到页面中进行显示. 第一种方式:后台处理 第二种方式:JS中定义全局变量,然后进行显示,可以书写一个JS函数对不同的需要进行不同的替换,也就可以 ...

  3. js面向对象初步探究（上） js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  4. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  5. 第十五节 JS面向对象实例及高级

    实例:面向对象的选项卡 把面向过程的程序,改写成面向对象的形式 原则:不能有函数套函数,但可以有全局变量 过程: onload —— 改写成 构造函数,其中window.onload的功能是在页面加载 ...

  6. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  7. 大话JS面向对象之开篇万物皆对象------（ATM取款机引发的深思）

    一,总体概要 OO(面向对象)概念的提出是软件开发工程发展的一次革命,多年来我们借助它使得很多大型应用程序得以顺利实现.如果您还没有掌握并使用OO进行程序设计和开发,那么您无疑还停留在软件开发的石器时 ...

  8. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  9. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

随机推荐

  1. php环境搭建 （window环境下 eclipse+Wampserver）

    看了好多的环境搭建感觉好复杂呀,自己搞了一下简单的可以用了 php的手册   http://www.php.net/manual/zh/ 一,下载 1,下载eclipse http://www.ecl ...

  2. window.print打印方法实现

    vue中使用window.print打印效果 项目要求 打印每页有10行表格,如果接口数据没有十个显示10行 效果图 第一页 第二页 子组件 <template> <div> ...

  3. centos7 部署镜像仓库 harbor

    =============================================== 2018/4/16_第2次修改                       ccb_warlock 更新 ...

  4. web性能优化之js图片懒加载

    html <div class="container"> <ul> <li> <div id="first" clas ...

  5. jmeter之数据库

    https://www.cnblogs.com/ShadowXie/p/6007515.html

  6. 使用html+css+js实现计算器

    使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...

  7. MySQL基础 - 权限配置

    为数据库创建特定的用户和密码 mysql>grant all privileges on <database>.* to '<username>'@'localhost' ...

  8. MS Sql Server 数据库或表修复(DBCC CHECKDB)

    MS Sql Server 提供了很多数据库修复的命令,当数据库质疑或是有的无法完成读取时可以尝试这些修复命令.  1. DBCC CHECKDB  重启服务器后,在没有进行任何操作的情况下,在SQL ...

  9. MySQL学习笔记：case when

    一.MySQL case when的三种用法: 1.case 字段 when, 字段的具体值: select a.*, case sex when '1' then '男' else '女' end ...

  10. PowerMock+SpringMVC整合并测试Controller层方法

    PowerMock扩展自Mockito,实现了Mockito不支持的模拟形式的单元测试.PowerMock实现了对静态方法.构造函数.私有方法以及final方法的模拟支持,对静态初始化过程的移除等强大 ...