面向对象在javascript中的应用

原创 2004年07月06日 10:09:00

实现的功能为:

选择商品列出商品信息,商品名,单价,数量,合计价格,总价

动态的改变商品数量生成商品合计和总价

不允许有重复选择的商品

实现选择商品删除功能

================================

代码如下:


<html>
<head>
<title>商品订单添加</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<link href="../../CSS/swo_style3.css" rel="stylesheet" type="text/css">
<script LANGUAGE="javascript">
<!--
var onecount;
var x;//选择商品变量
onecount=0;
x=0;
subcat = new Array();
ProList=new Array();
/*
父类别
名称
商品id
重量
会员价
市场价
vip价
*/
subcat[0] = new Array("14","95A4彩色喷墨打印纸","7","95","13","16","11");

subcat[1] = new Array("14","95A3彩色喷墨打印纸","8","95","29","34","24.2");

subcat[2] = new Array("15","105A2彩色喷墨打印纸","9","105","65","72","56");

subcat[3] = new Array("15","105A3彩色喷墨打印纸","10","105","33","38","29.2");

subcat[4] = new Array("15","105A4彩色喷墨打印纸","11","105","15","18","13.5");

subcat[5] = new Array("16","108A2彩色喷墨打印纸","12","108","60","66","50");

subcat[6] = new Array("16","108A3彩色喷墨打印纸","13","108","30","35","26.2");

subcat[7] = new Array("16","108A4彩色喷墨打印纸","14","108","14","16","12");

subcat[8] = new Array("17","110A2彩色喷墨打印纸","15","110","60","68","50.4");

subcat[9] = new Array("17","110A3彩色喷墨打印纸","16","110","30","36","27.4");

subcat[10] = new Array("17","110A4彩色喷墨打印纸","17","110","15","17","12.6");

subcat[11] = new Array("18","128A2彩色喷墨打印纸","18","128","61","76","58");

subcat[12] = new Array("18","128A3彩色喷墨打印纸","19","128","35","40","30.2");

subcat[13] = new Array("18","128A4彩色喷墨打印纸","20","128","15","19","14");

subcat[14] = new Array("34","108A4背胶彩喷纸","21","108","10","12","8.5");

subcat[15] = new Array("34","108A6背胶彩喷纸","22","108","2.7","3.15","2.25");

subcat[16] = new Array("35","108克610*30背胶彩喷纸","23","108","150","175","146");

subcat[17] = new Array("34","125A4背胶照片纸","24","125","15","18","12");

subcat[18] = new Array("34","125A6背胶照片纸","25","125","8.5","10.5","7.5");

subcat[19] = new Array("34","125克大头贴","26","125","8.5","10.5","7.5");

subcat[20] = new Array("34","125克妙妙贴","27","125","8.5","10.5","7.5");

subcat[21] = new Array("34","135A4背胶照片纸","28","135","15","18.5","12.3");

subcat[22] = new Array("34","135A6背胶照片纸","29","135","3.3","4","3.075");

subcat[23] = new Array("2","135克高光喷墨照片纸","30","135","10","12","8.5");

subcat[24] = new Array("2","160克高光喷墨照片纸","31","160","12","13","9.5");

subcat[25] = new Array("2","180A3高光喷墨照片纸","32","180","25.2","32.2","22.2");

subcat[26] = new Array("2","180A4高光喷墨照片纸","33","180","12","15","10");

subcat[27] = new Array("2","180A6高光喷墨照片纸","34","180","3","3.75","2.5");

subcat[28] = new Array("35","180克610*30高光照片纸","35","168","180","200","168");

subcat[29] = new Array("35","180克914*30高光照片纸","36","180","270","300","252");

subcat[30] = new Array("2","210高光喷墨照片纸(背印)","37","210","19","22","15");

subcat[31] = new Array("2","235A3高光喷墨照片纸","38","235","35","42","28");

subcat[32] = new Array("2","235A4高光喷墨照片纸","39","235","17","20","13");

subcat[33] = new Array("35","235克610*30高光照片纸","40","235","250","260","220");

subcat[34] = new Array("35","235克914*30高光照片纸","41","235","360","370","315");

subcat[35] = new Array("35","260克1118*30镜面相纸","42","260","19","25","0");

subcat[36] = new Array("35","260克610*30镜面相纸","43","260","23","25","19");

subcat[37] = new Array("35","260克914*30镜面相纸","44","260","23","25","19");

subcat[38] = new Array("11","260克RC高光照片纸","45","260","28","31","26");

subcat[39] = new Array("32","A3金箔、银箔系列","46","0","17","20","10");

subcat[40] = new Array("32","A3沙金、沙银系列","47","0","19","24","12");

subcat[41] = new Array("32","A4金箔、银箔系列","48","0","8","10","5");

subcat[42] = new Array("32","A4沙金、沙银系列","49","0","20","24","12");

subcat[43] = new Array("32","热转印纸","50","0","8","10","6");

subcat[44] = new Array("33","白画布","51","0","17","21.5","14.5");

subcat[45] = new Array("33","白画布-1","52","0","17","20","13");

subcat[46] = new Array("33","白画布-2","53","0","13","15","10.5");

subcat[47] = new Array("33","帆画布","54","0","17","21","14");

subcat[48] = new Array("33","亮白银雕布","55","0","20","24","16");

subcat[49] = new Array("33","棉画布","56","0","30","35","25");

subcat[50] = new Array("27","SinoPIS&#8482;连续供墨系统","57","0","0","0","0");

subcat[51] = new Array("28","快干染料墨盒","58","0","30","35","26");

subcat[52] = new Array("29","耐光颜料墨盒","59","0","33","36","27");

subcat[53] = new Array("30","热转印墨盒","60","0","47","55","38");

subcat[54] = new Array("26","A3/单面免层压基片","61","0","450","500","360");

subcat[55] = new Array("26","A3/双面免层压基片","62","0","540","600","420");

subcat[56] = new Array("26","A4/单面免层压基片","63","0","220","250","180");

subcat[57] = new Array("26","A4/双面免层压基片","64","0","27","300","210");

subcat[58] = new Array("23","PVC膜","65","0",".5",".8",".37");

subcat[59] = new Array("23","PVC优质证卡纸","66","0","1.2","1.5",".8");

subcat[60] = new Array("23","PVC中料","67","0",".6",".8",".4");

subcat[61] = new Array("20","220A3双面彩喷名片纸","68","0","38","42","28");

subcat[62] = new Array("21","220A3压纹彩喷名片纸","69","0","40","44","31");

subcat[63] = new Array("20","220A4双面彩喷名片纸","70","0","18","21","14");

subcat[64] = new Array("21","220A4压纹彩喷名片纸","71","0","18","22","15.5");

subcat[65] = new Array("22","235克压纹名片纸(特级)","72","0","22","24","16.5");

subcat[66] = new Array("2","this is a test!","77","201","201","101","301");

onecount=67;  
function changelocation(protype)
    {
    document.form1.product.length = 0; 
    var protype=protype;
    var i;
    document.form1.product.options[0] = new Option('请选择商品名','');
    for (i=0;i <onecount; i++)
        {
            if (subcat[i][0]==protype)
            {
            document.form1.product.options[document.form1.product.length] = new Option(subcat[i][1], subcat[i][2]+","+subcat[i][3]+","+subcat[i][4]+","+subcat[i][5]+","+subcat[i][6]);   
            }       
        }      
    }

//商品集合
function productsObj()
{
 this.productsArray = new Array()
 this.addProduct = addProduct
 this.getProducts = getProducts
}
function addProduct(oProduct)
{
 this.productsArray = this.productsArray.concat(oProduct)
}
function getProducts()
{
 var tmp = new Array();
 var j = 0
 for(var i = 0;i < this.productsArray.length;i++){
  if(this.productsArray[i].isValid==1){
  var b = this.productsArray[i];
  tmp[j] = b;
  j++
  }
 }
 return tmp;
}
/*
父类别
名称
商品id
重量
会员价
市场价
vip价
*/
//商品对象
function productObj(proName,proID,proWeight,proPriceMember,proPriceMarket,proPriceVIP,isValid,quantity,totolMoney,checkedSerial)
{
 this.proName = proName
 this.proID = proID
 this.proWeight = proWeight
 this.proPriceMember= proPriceMember
 this.proPriceMarket = proPriceMarket
 this.proPriceVIP= proPriceVIP
 this.isValid= isValid
 this.quantity = quantity
 this.totolMoney = totolMoney
 this.checkedSerial=checkedSerial
 this.setValid = setValid
 this.setQuantity = setQuantity
 this.setCheckedSerial = setCheckedSerial
}
function setValid(isInt)
{
 this.isValid = isInt
}

function setQuantity(oQuantity)
{
 var oCheckedSerial
 var oTotolMoney
 this.quantity=oQuantity
 oCheckedSerial = this.checkedSerial
 if(oCheckedSerial==1){
  oTotolMoney=this.proPriceMember*oQuantity
 }
 else if(oCheckedSerial==2){
  oTotolMoney=this.proPriceMarket*oQuantity
 }
 else if(oCheckedSerial==3){
  oTotolMoney=this.proPriceVIP*oQuantity
 }
 this.totolMoney=oTotolMoney
}

function setCheckedSerial(oCheckedSerial)
{
 this.checkedSerial=oCheckedSerial
 var oTotolMoney
 oQuantity=this.quantity
 if(oCheckedSerial==1){
  oTotolMoney=this.proPriceMember*oQuantity
 }
 else if(oCheckedSerial==2){
  oTotolMoney=this.proPriceMarket*oQuantity
 }
 else if(oCheckedSerial==3){
  oTotolMoney=this.proPriceVIP*oQuantity
 }
 this.totolMoney=oTotolMoney
}

//根据商品集合构造html
function makeHtml(products)

 var colneTD
 var ProId,ProName,ProZl,ProHyj,ProScj,ProVip,ProIsvalid,ProSerial,Proquantity,ProTotolMoney
 var proTable
 var prosMoney = 0
 var productsArr = cProducts.getProducts()
 proTable = "<table width='100%' border='1' cellpadding='2' cellspacing='2' bordercolor='#FFFFFF' bgcolor='#E3E3E3'>"
 //alert(productsArr.length)
 for(var i=0;i<productsArr.length;i++){
  
  ProId=productsArr[i].proID
  ProName=productsArr[i].proName
  ProZl=productsArr[i].proWeight
  ProHyj=productsArr[i].proPriceMember
  ProScj=productsArr[i].proPriceMarket
  ProVip=productsArr[i].proPriceVIP
  ProIsvalid=productsArr[i].isValid
  ProSerial = productsArr[i].checkedSerial
  Proquantity = productsArr[i].quantity
  ProTotolMoney = productsArr[i].totolMoney

  prosMoney = prosMoney + parseFloat(ProTotolMoney)
  //if(ProIsvalid == 1){
   x = i + 1
   colneTD = "<td width='10%' class='table_header3'>&nbsp;"+x+"&nbsp;<input type='checkbox' name='checkbox"+x+"' value='"+ProId+"' checked onclick='delProduct("+ProId+")'></td>"

   colneTD = colneTD + "<td width='21%' class='table_header3'>"+ProName+"</td>"

   colneTD = colneTD + "<td width='17%' class='table_header3'>"+ProZl+"</td>"

   colneTD = colneTD + "<td width='17%' class='table_header3'>"+ProHyj+"<input name=Price"+x+"  type='radio' value='"+ProHyj+"'"
   if(ProSerial==1){
   colneTD = colneTD + " checked "
   }
   colneTD = colneTD + "onclick='setTValue("+ProId+",1)'>/"+ProScj+"<input name=Price"+x+"  type='radio' value='"+ProScj+"'"
   if(ProSerial==2){
   colneTD = colneTD + " checked "
   }
   colneTD = colneTD + "onclick='setTValue("+ProId+",2)'>/"+ProVip+"<input name=Price"+x+"  type='radio' value='"+ProVip+"'"
   if(ProSerial==3){
   colneTD = colneTD + " checked "
   }
   colneTD = colneTD + "onclick='setTValue("+ProId+",3)'></td>"

   colneTD = colneTD + "<td width='17%' class='table_header3'><input name=number"+x+" type=text size=6 maxlength=4 value="+Proquantity+" onchange='changeTValue(this,"+ProId+")'></td>"

   colneTD = colneTD + "<td width='18%' class='table_header3'><input name=jinexj"+x+" type=text size=6 maxlength=4 value="+ProTotolMoney+"><input name='proinfo'"+x+" type='hidden' value="+ProId+"></td>"

   proTable = proTable + "<tr>" + colneTD + "</tr>"
  //} 
 }
 proTable = proTable + "</table>"
 document.all.DingPro.innerHTML = proTable
 document.all.prosMoney.innerHTML = "人民币"+prosMoney+"元";
}

//等待添加的集合
var cProducts = new productsObj()
function addPro()
{
 var ProStr=document.form1.product[document.form1.product.selectedIndex].value;
 var ProId=ProStr.split(",")[0];
 var ProZl=ProStr.split(",")[1];
 var ProHyj=ProStr.split(",")[2];
 var ProScj=ProStr.split(",")[3];
 var ProVip=ProStr.split(",")[4];
 var ProName=document.form1.product[document.form1.product.selectedIndex].text;
 if(ProId!="")
 {
  
  if(isHaveExist(ProId))
  {
   alert("已存在此种商品,请更改数量即可!")
  }
  else{
   
   var oProObj = new productObj(ProName,ProId,ProZl,ProHyj,ProScj,ProVip,1,1,ProHyj,1)
   cProducts.addProduct(oProObj)
   makeHtml(cProducts)
  }
 }
 else
 {
  alert("请选择商品!");
 }
}
function isHaveExist(ProId)
{
 var productsArr = cProducts.getProducts()
 var oProID
 var isInt = 0
 for(var i=0;i<productsArr.length;i++){
  oProID = productsArr[i].proID
  if(oProID==ProId){
   isInt = 1
   break
  }
 }
 return isInt
}
function delProduct(ProID)
{
 var productsArr = cProducts.getProducts()
 var oPro
 var oProID
 for(var i=0;i<productsArr.length;i++){
  oPro = productsArr[i]
  oProID = productsArr[i].proID
  if(oProID==ProID){
   oPro.setValid(0)
  }
 }
 makeHtml(cProducts)
}
function changeTValue(thisObj,ProID)
{
 var oPro
 var changeValue
 changeValue = thisObj.value
 oPro = searchPro(ProID)
 oPro.setQuantity(changeValue)
 makeHtml(cProducts)
}
function setTValue(ProID,ProSerial)
{
 var oPro
 oPro = searchPro(ProID)
 oPro.setCheckedSerial(ProSerial)

 makeHtml(cProducts)
}
function searchPro(ProID)
{
 var productsArr = cProducts.getProducts()
 var oProID
 var oPro = null
 for(var i=0;i<productsArr.length;i++){
  oProID = productsArr[i].proID
  if(oProID==ProID){
   oPro = productsArr[i]
   break
  }
 }
 return oPro
}
//-->
</script>
<body leftmargin="2" topmargin="2">
<form name="form1">
<table width="100%" border="0" cellspacing="2" cellpadding="4">
 
    <tr>
      <td colspan="4" >&nbsp;</td>
    </tr>
    <tr>
      <td width="23%" align="right" class="table_header1">商品类别:</td>
      <td width="15%" class="table_header1"> <select name="protype" id="protype" onChange="changelocation(this.options[this.selectedIndex].value)">
          <option value="" selected>请选择商品类别</option>
         
          <option  value="35">卷筒系列</option>
         
          <option  value="34">背胶产品</option>
         
          <option  value="33">影楼专用耗材</option>
         
          <option  value="32">特殊材料</option>
         
          <option  value="30">热转印墨盒</option>
         
          <option  value="29">耐光颜料墨盒</option>
         
          <option  value="28">快干染料墨盒</option>
         
          <option  value="27">连续供墨系统</option>
         
          <option  value="26">免层压基片</option>
         
          <option  value="23">PVC证卡系列</option>
         
          <option  value="22">235压纹名片</option>
         
          <option  value="21">220压纹名片</option>
         
          <option  value="20">220双面名片</option>
         
          <option  value="18">128彩喷纸</option>
         
          <option  value="17">110彩喷纸</option>
         
          <option  value="16">108彩喷纸</option>
         
          <option  value="15">105彩喷纸</option>
         
          <option  value="14">95克彩喷纸</option>
         
          <option  value="11">镜面相纸</option>
         
          <option  value="2">高光相纸</option>
         
        </select> </td>
      <td width="10%" class="table_header1" id="price"><p>商品名称:</p></td>
      <td width="52%" class="table_header1" id="price"><select name="product">
          <option selected>请选择商品</option>
        </select>
        <input type="button" name="Submit" value="选择" onClick="addPro()">
        <input type="button" name="Submit2" value="商品确认" onClick="ProOk()"></td>
    </tr>
 
</table>
<table width='100%' border='0' cellpadding='4'><tr><td width='10%' class='table_header1'>编号</td><td width='21%' class='table_header1'>商品名称</td><td width='17%' class='table_header1'>重量</td><td width='17%' class='table_header1'>会员价/市场价/VIP价</td><td width='17%' class='table_header1'>数量</td><td width='18%' class='table_header1'>合计金额</td></tr></table>
<div id="DingPro"></div>
  <table width='100%' border='0' cellpadding='4'>
    <tr>
      <td width='82%' align="right" class='table_header1'>
        总计:</td>
      <td width='18%' class='table_header1'  id="prosMoney"></td>
    </tr>
  </table>
</form>
</body>
</html>

JavaScript面向对象

本课程将JavaScript语言和面向对象思想相结合在一起,主要包含面向对象程序设计的基本概念如对象、函数、构造函数、原型和上升到面向对象的实际案例等知识。
  • 2017年08月24日 14:24

JavaScript 面向对象之 this 关键字详解

js面向(基于)对象编程——类(原型对象)与对象 this—问题提出 在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性(比如:当我们创建一个Pers...
  • u013372487
  • u013372487
  • 2015-10-09 16:43:31
  • 1585

javascript中的面向对象理解(一)

一、注意:提到“面向对象”这一概念,众所周知,javascript中的面向对象思想与其他的编程语言(例如:PHP、Java等)是有着很大区别的。因此,我们先复习下,传统意义上,面向对象的相关概念,以便...
  • u014516981
  • u014516981
  • 2016-10-19 23:48:23
  • 2528

javascript中面向对象的三大作用

面向对象的三大作用 作用1:封装框架 我们可以定义一个对象,去封装一些不同的功能,这样,别人无需了解内部功能如何使实现的,只需要知道如何调用就可以了,这就是所谓的拿来主义。比如一个对象有不同的功能模块...
  • Tyro_java
  • Tyro_java
  • 2016-04-15 21:19:39
  • 3688

JavaScript面向对象精要(一)

传统面向对象的语言几大特征:封装、继承、多态,在JavaScript中并不适用。JavaScript的弱类型特征允许你用比其他语言更少的代码完成同样的任务。无需提前设计好类再进行编码。需要一个具有某个...
  • ligang2585116
  • ligang2585116
  • 2017-01-08 15:16:50
  • 3360

2017.02.24 Javascript 面向对象编程1--封装

Javascript 面向对象编程1--封装
  • duola8789
  • duola8789
  • 2017-02-26 21:23:47
  • 250

JavaScript如何实现面向对象和继承机制?

JavaScript实现面向对象?  function MyObject() {    this.name="myobject";    this.type="class";    this.meth...
  • u012575451
  • u012575451
  • 2016-10-02 13:23:23
  • 823

javascript中的面向对象,你了解多少?

Javascript 是面向对象开发的脚本语言,既然javascript是面向对象开发的,那么面向对象的前提:抽象,应该必须有,那么看看这个对象的创建,该如何抽象,然后封装呢?那么来看看javascr...
  • wangyongxia921
  • wangyongxia921
  • 2014-03-07 21:13:28
  • 3193

JavaScript面向对象编程(继承实现方式)

许多OO 语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在ECMAScript 中无法实现接口继承。ECMAScript ...
  • hsd2012
  • hsd2012
  • 2016-03-25 15:10:05
  • 686

JavaScript 面向对象(二)对象和 JSON 的区别

1.2 对象和 JSON 的区别 JSON 就是 JavaScript object notation ,JS对象表示法,是JS对象的严格子集。 区别就是引号:JSON要求所有的属性名(键)必须加 双...
  • jiaojiao772992
  • jiaojiao772992
  • 2017-09-06 21:34:47
  • 286
收藏助手
不良信息举报
您举报文章:面向对象在javascript中的应用
举报原因:
原因补充:

(最多只允许输入30个字)