<!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. jexus linux x64[标准版] - 未集成mono 配置https

    一.找到mono安装位置 sudo find / -name mono 二.首先查看“/lib”或“/usr/lib”等系统库文件夹中是否有SSL库文件的名字,该文件名应该是“libssl.so.版本 ...

  2. SQLAlchemy-对象关系教程ORM-create

    ORM是建立在SQL语言构造器之上的工具集,用于将Python对象映射到数据库的行,提供了一系列接口用于从数据库中存取对象(行).在ORM 工作时,在底层调用SQL语言构造器的API,这些通用的操作有 ...

  3. day09作业

    一.填空题 1.方法 2.堆内存 3.构造方法 4.this 5.this 6.static 7.使用类名进行访问 8.package import class 9.关键字 10.lang 二.选择题 ...

  4. java基础39 增强for循环(也叫foreach循环)

    增强for循环是jdk1.5出现的新功能 1.增强for循环的作用 简化了迭代器的书写格式(注意:增强for循环底层还是使用了迭代器遍历) 2.增强for循环的格式 for(数据类型 变量名:遍历的目 ...

  5. [java笔记]常用的设计模式

    1.单例设计模式 单例设计模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 1)构造方法私有化 2)声明一个本类对象 3)给外部提供一个静态方法获取对象实例 例如: class Singl ...

  6. return to dl_resolve无需leak内存实现利用

    之前在drop看过一篇文章,是西电的Bigtang师傅写的,这里来学习一下姿势做一些笔记. 0x01 基础知识 Linux ELF文件存在两个很重要的表,一个是got表(.got.plt)一个是plt ...

  7. 更改Chrome浏览器安装位置的方法

    因为Google Chrome独特的优势,我们很多人都在使用它,但同时我们也会发现它是默认安装在我们的系统盘的,那么是否就不能修改其安装路径了呢?其实不然,这里介绍一种方法,亲测可行. 一.正常安装 ...

  8. 【LOJ】#2123. 「HEOI2015」最短不公共子串

    题解 我们对于B串建出后缀自动机和序列自动机 对于问题1,枚举左端点然后跑后缀自动机,直到不能匹配作为这个左端点的答案 对于问题2,枚举左端点然后跑序列自动机,直到不能匹配 对于问题3,设f[i][j ...

  9. 一台Windows下配置多个Tomcat服务器

    上一篇博客<Windows下配置Tomcat服务器>讲了,如何在一台Windows机器上配置一个Tomcat服务器.这篇介绍一下如何在一台Windows机器上配置多个Tomcat. 第一步 ...

  10. Intellij IDEA Cannot resolve symbol XXX 问题解决办法汇总

    maven项目遇到这类问题基本上是两方面的原因,类对应的依赖没有加载进来.编译器自身的设置和缓存问题. 解决第一类:1.检查项目的pom文件,是否必要的依赖都写清楚了: 2.是否使用自己的私有库,&l ...