<!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. 在Mac上搭建ReactNative开发环境

    1.安装Homebrew,   Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...

  2. qlserver排序规则在全角与半角处理中的应用

    --1．查询区分全角与半角字符--测试数据DECLARE @t TABLE(col varchar(10))INSERT @t SELECT 'aa'UNION ALL SELECT 'Aa'UNIO ...

  3. 20155225 2016-2017-2 《Java程序设计》第2周学习总结

    20155225 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 比较java和C语言的不同点: java除了基本类型还有类类型 基本类型中还有字节和布尔 对 ...

  4. PHP性能调优---php-fpm中启用慢日志配置（用于检测执行较慢的PHP脚本）

    虽然通过nginx accesslog可以记录用户访问某个接口或者网页所消耗的时间,但是不能清晰地追踪到具体哪个位置或者说函数慢,所以通过php-fpm慢日志,slowlog设置可以让我们很好的看见哪 ...

  5. 2017 Tag Cloud

    距离上一篇随笔已经过去了三年多,惊讶地发现我还有个博客在这里 :) 越来越懒,这三年多就用下面这个tag cloud来总结好了

  6. linux虚拟机磁盘不够用以及进行扩容时遇到的问题

    我使用的是:gparted live cd工具  系统是centOS6.2 使用gparted live cd工具进行无损分区,方法很简单,下载iso文件都在VMware对应的linux系统上设置CD ...

  7. UtraEdit正则表达式替换.def

    * (?   替换(?结尾 ),*$  替换),开头

  8. Python全栈开发之14、Javascript

    一.简介 前面我们学习了html和css,但是我们写的网页不能动起来,如果我们需要网页出现各种效果,那么我们就要学习一门新的语言了,那就是JavaScript,JavaScript是世界上最流行的脚本 ...

  9. 伪分布式安装Hadoop

    Hadoop简单介绍 Hadoop:适合大数据分布式存储与计算的平台. Hadoop两大核心项目: 1.HDFS:Hadoop分布式文件系统 HDFS的架构: 主从结构: 主节点,只有一个:namen ...

  10. Gitlab Issue Tracker and Wiki(二)

    一. 引用问题 1. 登陆 Gitlab服务器 2. 进入到super-git项目 3. 创建一个问题 4. 查看创建问题的号码,可以在下图找到. 5. 对代码进行提交去关闭这个问题,首先把项目在本机 ...