购物车编程实训报告

1、客户端购物车6-29. 登录页面1 功能页面2功能描述1) 当鼠标点击用户输入框且没有输入值，离开后输入框下面会提示 用户名不能为空；当鼠标点击密码输入框且没有输密码，离开后 密码输入框下面会同样提示密码不能为空；2) 当用户没有输入任何值时就点击登录，此时会提示“用户不能为 空；当用户完整输入用户名和密码时，会跳转到用户指定的页面。3.关键js代码function check()document.geteleme ntbyld(” nameinfo j.style. display二“none”;/ 未输入之前隐藏提示字眼docume nt.getelementbyldcasswdi nfo

2、n).style.display="none" var name=document.getelementbyld("logirmame").value;if(n ameen gth<l)docum en t.geteleme ntbyld(” nameinfo”).style. display 二"block" return false;var passwd=document.getelementbyld("loginpasswd").value; if(passwdengthvl)docume nt.get

3、eleme ntbyldpasswdinfo")style.display=”block”； return false;function checkloginname()var name=document.getelementbyld(“loginnameh).value; if(nameengthvl)document.getelementbyld(hnameinfo").style.display=hblock"/ 空值 时会提示elsedocume nt.geteleme ntbyld(“ nameinfoj.style. display 二one”；fun

4、ction checkloginpasswd()var name=document.getelementbyld("loginpasswct).value;if(nameengthvl)docume nt.geteleme ntbyldc'passwdi nfo").style.display="block"elsedocume ntgetelementbyld("passwdinfo")styledisplay=”n one"6-30.商品维护1. 功能页面商品確护育品名/ 葛品规拾/ 品单价: 商品赦耋:io囹片

5、11育品名秣育品规轄平果figlocm-15-cm5.0100刪除1修改2. 功能描述1) 根据输入框中输入参数之后传递点击保存传递到下面的表格中2) 下面的表格中最后一列有修改删除，点击删除时会删除当前单 元格，点击修改时，在输入框中再次输入时点击保存时下面的 单元格的内容会出现对应改变3) 当用户未在某行中输入数据时点击保存会提示当前数据不能为 空，且单价和数量一栏只能输入数值，如果没有输入数值时会4 )单价数量只能输入数值，输入其他会提示只能输入数值3.关键js代码1) 保存到表格的js代码var name=document.getelementbyld(”namy).value;var

6、 specificati on 二 docume nt.geteleme ntbyld(”spec 讦 icati on ").value;var price=document.getelementbyldprice“)value;var number=document.getelementbyld("number j.value; if(opflag=0)var mytable=documentgetelementbyld("mytable”)；mytable.i nsertrow(l);mytable.rowsl.insertcell(0);mytable.r

7、owsl.insertcell(l);mytable.rowsl.i nsertcell(2);mytable.rowsl.insertcell(3);mytable.rowsl.insertcell(4);mytable.rowsl.i nsertcell(5);mytable.rowsl.cells0.i nn erhtml=h<imgsrc='images/l.jpg,width二'64px height=,53px'/>"mytable.rowsl.cellsl.app en dchild(docume nt.createtextnode(

8、 name);mytable.rowsl.cells2.appe ndchild(docume nt.createtextnode(spe cificati on);mytable.rowsl.cells3.appe ndchild(docume nt.createtextnode(pric e)；mytable.rowsl.cells4.app en dchild(docum en t.createtextnode (nu mber);mytable.rowsl.cells5.innerhtml="<ahref#'onclick=,deleterow(this)&qu

9、ot;> 册 lj 除 v/a>|va href='#* onclick="updaterow(this)"> 修改 </a>"if(opflag=l)var mytable=document.getelementbyld(”mytable”)；mytable.rowsoprow.cellsl.in ne rhtml=name;mytable.rowsoprow.cells2.i nn erhtml=specificatio n;mytable.rowsoprow.cells3.in nerhtml=price;mytable

10、.rowsoprow.cells4.in nerhtml 二 nu mber; opflag=0;2) 修改删除功能的js代码function updaterow(obj)opflag=l;var r=obj.parentnode.parentnode.rowlndex;oprow=l;var mytable=document.getelementbyldmytable");docume nt.getelem en tbyld(" name,).value=mytable.rowsr.cellslj n nerhtml;docume nt.geteleme ntbyld(&

11、quot;specificati on ").value=mytable.rowsr.cel ls2.innerhtml;docume nt.geteleme ntbyld(,price,).value=mytable.rowsr.cells3.i n nerhtml;document.geteleme ntbyld(" nu mber").value=mytable.rowsr.cells4.innerhtml;function deleterow(obj)var r=obj.parentnode.parentnode.rowlndex;var mytable=

12、documentgetelementbyld("mytabiy);mytable.deleterow(r);3) 提示功能的js代码document.getelem en tbyld("pricei nfo").style.display=hno ne"docume nt.geteleme ntbyld(" nu mberi nfo,).style.display="n one"docum en t.geteleme ntbyld("pricei nfol"). style, display"

13、one”；docume nt.getelemen tbyld(" nu mberi nfolh).style.display=hn one'1;var price=document.getelementbyld("price").value;if(priceen gth<l)docum en t.getelem en tbyld("pricei nfo"). style, display 二” block”; return false;if(isnan(number(price)document.geteleme ntbyld(&

14、quot;pricei nfolj.style.display 二"block" return false;var number=document.getelementbyld("number").value;if(nu mber.le ngthvl)docum en t.getelem en tbyld(n numberi nfo”).style. display 二“block"return false;if(isnan(number( nu mber)docume nt.geteleme ntbyld(”numberi nfol”). s

15、tyle, display 二"block" return false;function checkloginname()var name=document.getelementbyld("price").value;if(n ameen gth<l)docume nt.geteleme ntbyld(,pricei nfo”).style.display 二"block"elsedocument.getelementbyld("priceinfo").style.display="none&quo

16、t;function checkloginpasswd()var name=document.getelementbyldnumber").value;if(nameengthv)docum en t.getelem en tbyld(n numberi nfo"). style, display 二“block”；elsedocume nt.geteleme ntbyldj numberi nfo'j.style.display 二one"7-1.购物页面:l功能页面2 功能描述1) 下单数量的加减，通过两个加减符号的按钮来控制数量的多少,但如果输入只能

17、是数值，但下单数量不能大于总数2) 下单数量下好，点击加入购物车按钮再点击查看购物车会出现购物的内容和总价3) 点击结算按钮会算好购物车里面的价钱4) 下单数量不能为负值，不能超过最大值，不能是除数值以外。3.关键js代码1) 加减按钮的js代码fun ction jia(id)var val=docume nt.geteleme ntbyld(id). value;val=parsel nt(val)+l;docume nt.geteleme ntbyld(id).value 二 val;function jian (id)var val=docume nt.getelem en tbyld

18、(id).value;val=parselnt(val)-l;if(parselnt(val)<0)return;docume nt.geteleme ntbyld(id).value 二 val;2) 际代码var price=mytable.rowsrow.cells2.innerhtml;var number=document.getelementbyld(id).value; 讦(nu mber.le ngthvl)alertc*请输入下单数量！ “)；return;if(isnan(number( nu mber)alert(“下单数量应该为数值！ ”)；return;var

19、obj=new shangpin(name,price,number); objsobjs.le ngth=obj;3) 力叭购物车的代码function viewcar()var sum=0;var sum nu mber=0;for(var obj in objs)objsobj.act();sum+=objsobj.price*objsobj. number;sum nu mber+=number(objsobj. nu mber);console.iog("总金额："+sum+"总数量:n+sumnumber+"平均价 格：n+sum/sumnu

20、mber);str=window.showmodaldialog("7iin.htmr,/objs/,width=600px;height=400")；7-2.结算页面和购物车页面7-2-1结算页面1功能页面易物车中信息mozilla firefoxli购物车屮的商品苹果结算se5&50 血紀送地址丽海事胆业技术学隱厂m t人/毕諏麒索号码 :'2功能描述1) 点击加入购物车后会出现结算页面，结算页面会出现你所要购买的商品，输a0谜信息后点5算，会算)。2) 结算页面白關是获取的咖面白鳩息3) 总数量，总金额是通过计算后传递结算页面的3关键js代码<s

21、cript type = 'text/javascript*>var objs=window.dialogarguments;var sum=o;var sumnumber=0;function display()var mytable=document.getelementbyld("mytable");for(var obj in objs)mytable.i nsertrow ；mytable.rowsl.insertcell(0);mytable.rowsl.cells0.in nerhtml=objsobj.n ame;mytable.rowsl.i

22、nsertcell(l);mytable.rowsl.cellsl.in nerhtml=objsobj.price;mytable.rowsl.i nsertcell(2);mytable.rowsl.cells2.in nerhtml=objsobj. nu mber;mytable.rowsl.i nsertcell(3);mytable.rowsl.cells3.i nn erhtml=objsobj price*objsobj.numbe r；sum+=objsobj.price*objsobj. nu mber;sum nu mber+=number(objsobj. nu mber);docume nt.geteleme ntbyld(hz on gjineh)