<!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. centos7.2系统没有eth0网卡

    最近一直在学centos7.5系统,偶然看到虚拟机里有7.2系统所以想练习一下(其实7.2和7.5差不多),但是打开虚拟机之后,发现没有eth0网卡 那没有eth0网卡就无法远程连接ssh,既然遇到了 ...

  2. Ubuntu_搜狗输入法安装

    前言 由于很少使用Linux系统,所以闲下来打算看一看,在安装完成后,遇到无法输入中文的问题.我使用的是小鹤双拼,所以习惯使用搜狗输入法,本文记录一下如何在ubuntu系统下安装小鹤双拼 由于前两次并 ...

  3. sublime Text快捷键(超级全）

    sublime Text快捷键(超级全) Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W: ...

  4. 制作macOS10.12系列的系统镜像文件

    制作macOS10.12系列的系统镜像文件步骤,过程也比较简单,十来个命令.以10.12.6为例,首先,在苹果商店下载系统安装包APP,或者网上下载后把安装APP复制到  应用程序  文件夹. 然后打 ...

  5. OBJECT_ID()的使用方法

    数据库中每个对像都有一个唯一的ID值,用Object_name(id)可以根据ID值得到对像的名称,object_id(name)可以根据对像名称得到对象的ID object_id()只能返回用户创建 ...

  6. 在 Python 中使用 GDB 来调试 转载

    2013/11/01 | Comments 大约一年前,我接触了 Java 中的 Btrace 能够不停机查看线上 JVM 运行情况的特性让我艳羡不已. 另外还有强悍的 jStack 和 jConso ...

  7. Python之Selenium的爬虫用法

    Selenium 2,又名 WebDriver,它的主要新功能是集成了 Selenium 1.0 以及 WebDriver(WebDriver 曾经是 Selenium 的竞争对手).也就是说 Sel ...

  8. 20165333 实验二 Java面向对象程序设计

    姓名:陈国超 学号:20165333 班级:1653 实验课程:JAVA程序设计 实验名称:Java面向对象程序设计 实验时间:2018.4.14 指导老师:娄家鹏 实验内容及步骤 (一) " ...

  9. 使用CSS3 @media 设置页面自适应

    参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...

  10. Linux 下开发环境的搭建（软件安装）

    一.Centos6.5下安装JDK 步骤1: 查看现有安装的JDK版本 rpm –qa | grep -i java 步骤2: 卸载已有软件 rpm -e --nodeps java-1.7.0-op ...