<!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. asterisk各种报错

    1.控制台打印出: Got SIP response "Temporarily Unavailable" back from 210.13.87.110:5060   造成原因:在 ...

  2. CVE-2012-0003 Microsoft Windows Media Player ‘winmm.dll’ MIDI文件解析远程代码执行漏洞 分析

    [CNNVD]Microsoft Windows Media Player ‘winmm.dll’ MIDI文件解析远程代码执行漏洞(CNNVD-201201-110)    Microsoft Wi ...

  3. Sourcetree配置ssh密钥 - git图形化工具（二）

    这里主要介绍Sourcetree如何导入已经生成好的ssh私钥,如何生成ssh私钥自行百度. 如果Sourcetree没有配置ssh密钥,克隆时会提示如下错误: 仓库类型:这是一个无效的源路径/URL ...

  4. Action(8):Error-26608:HTTP Status-Code=504(Gateway Time-out)

    Action(8):Error-26608:HTTP Status-Code=504(Gateway Time-out) 若出现如下图问题, 1.在Vuser Generator中的Tools---& ...

  5. 浅谈jvm

    1 .说起jvm,很多人感觉jvm离我们开发实际很远.但是,我们开发缺每时每刻都离不开jvm. a: java源码 编译后成.class字节码文件, b:根据classpath找到这个字节码文件, c ...

  6. 007 爬虫（Scrapy库的使用）

    推荐网址: http://scrapy-chs.readthedocs.io/zh_CN/0.24/topics/architecture.html 1.简介 python开发的一个快速,高层次的屏幕 ...

  7. Ionic入门二：网格(Grid)页面布局

    ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) .而且在移动端,基本上的手机都支持.row 样式指定行,col 样式指定列. 1. ...

  8. webview内部跳转判断

    重写webview内的方法 webView.setWebViewClient(new WebViewClient() { @Override // 在点击请求的是链接是才会调用,重写此方法返回true ...

  9. linux config

    1.自定义命令:.bashrc 文件添加自定义命令 2.完成后,命令:source . .bashrc  使配置的自定义命令生效,如果提示没有该命令的情况,用   . .bashrc (注意是2个“点 ...

  10. 使用Mongo索引需要注意的几个点

    1.正则表达式和取反运算符不适合建立索引 正则表达式:$regex 取反运算符:$ne ,$nin 2.backgroud建立索引速度缓慢 前台创建是会有阻塞,backgroud效率缓慢,实际情况实际 ...