面向对象在javascript中的应用

最新推荐文章于 2024-03-02 16:25:52 发布

tongjr

最新推荐文章于 2024-03-02 16:25:52 发布

阅读量659

点赞数

分类专栏： javascript 文章标签： javascript header table function class 照片

本文链接：https://blog.csdn.net/tongjr/article/details/35025

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

实现的功能为：

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

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

不允许有重复选择的商品

实现选择商品删除功能

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

代码如下：

<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™连续供墨系统","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'> "+x+" <input type='checkbox' name='checkbox"+x+"' value='"+ProId+"' checked οnclick='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 + "οnclick='setTValue("+ProId+",1)'>/"+ProScj+"<input name=Price"+x+" type='radio' value='"+ProScj+"'"
   if(ProSerial==2){
   colneTD = colneTD + " checked "
   }
   colneTD = colneTD + "οnclick='setTValue("+ProId+",2)'>/"+ProVip+"<input name=Price"+x+" type='radio' value='"+ProVip+"'"
   if(ProSerial==3){
   colneTD = colneTD + " checked "
   }
   colneTD = colneTD + "οnclick='setTValue("+ProId+",3)'></td>"

colneTD = colneTD + "<td width='17%' class='table_header3'><input name=number"+x+" type=text size=6 maxlength=4 value="+Proquantity+" οnchange='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" > </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>