实现购物车面功能

1、大作业题目说明一、项目目的与要求：1、目的：(1)要求学生达到熟练掌握HTML、CSS、JavaScript技术；(2)基本掌握网页设计基本思路和方法；(3)能够利用所学的基本知识和技能，进行网页设计。2、基本要求：(1)要求利用HTML、CSSJavaScript完成网页设计；要求使用div+css布局；(3)网页中要设计javascript技术；(4)在网页设计时，构图良好。3、创新要求：在基本要求达到后，可进行创新设计。4、写出设计说明书二、作业要求1 .选题：完成下图所示的效果2 .时间安排：13周周三之前提交作品设计说明书和作品。3 .包括使用的技术，设计思路，制作步骤，功能实现的代

2、码，最终效果图和总结三、作业内容淘宝网1.审看*物车2.认口单信息3.付款总支忖宝4.啪认也把口建标辅宝贝在翻分单价1元）戮量小济（元）原作宙南：轩巧百蛹时闻捌交盅；舁巧百痛杓和腿系日蟒£行风时尚乏眉身黄独特张字将属跛闻公主at孑丑色弧色：榇色尺码：立题：r店W：舌市代存牌前日记卖家：Jlcfemcksm口片和受科手isa.oD.l*is捌除2165.00.|1|+2PH阳像店摘：实体鲤克实型：林泡囱。，弓如邮子因整犊漏甘苴酒度粉底酒】:*乳牙白1但以：/耳3鹃00-485HH油皿力/暂塞尔7吞塞尔；!£亮魅力芯始5<僚:.日困南：江方言的小屋突承；ts3仁方方今布；

3、物联系刖解2c才瓯促销专供丈减等最好用的ULye&U出世:；。旭删除所送胞品总讲（不街运曲1：b24元可森弟分56A作业要求：实现如图所示的页面效果需求说明：1.根据商品的数量和单价计算每行商品的小计。2 .根据商品数量、单价和积分，计算商品总价和积分。3 .当选中“全选”，所有商品全被选中，否则所有商品取消选中。4 .当所有商品被选中时，“全选”被选中，单击“全选”取消选中1.myCart.cssScharsetl'gb2312,e;/*CSSDocument»/body(nargin:Opx;padding:Opx;Font-size:12px;line-heig

4、ht:20px;color:tt333;>ul9li,olVh1vdl,ddlist-style:none;nargin:0px;padding:Opx;>acolor:81965b3;text-decoration:none;>a:houer<color:SCD590C；text-decoration:underline;>ing<border:Opx;uertical-align:middle;>ttheaderheight:40px;nargin:1Opxauto1Opxauto;uidth:80Opx;clear:both;>Hnauna

5、rgin:1Opxauto1Opxauto;uidth:80Opx;clear:both;naulistvidth:800px;nargin:OpxautoDpxauto;height:23px;tnaulistli<Float:leFt;height:23px;line-height:26px;,.naulist_red_leftbackground-ireage:url(./inages/taobao_bg.png);background-repeat:no-repeat;background-position:-12px-92px;uidth:3px;).naulist_redba

6、ckground-color:ttfF6600;text-alignreenter;font-size:11ipx;Font-weight:bold;color:UFFF;vidth:130px;).naulist_red_arrou<background-color:ttff6600;background-ireage:url(./inages/taobao_bg.png);background-repeat:no-repeat;background-position:Opx9px;uidth:13px;>nau】i$t_qnybackqround-colortext-align

7、:center;font-size:14px;Font-weight:bold;uidth:1S9px;人g1SEFOKw.，0/.naulist_gray_arrowbackground-color:tte4elieit;background-inage:url(./inages/taobao_bg.png);background-repeat:no-repeat;background-position:OpxOpx;width:13px;>.nauli$t_grjy_rightbackqround-inage:url(./inaqes/taobao_bg.pnq);backgroun

8、d-repeat:no-repeat;background-position:-12px-138px;uidth:3px;>contendwidth:800px;nargin:10pxautoSpxauto;clear:both;>text-align:center;uidth:50px;)text-dlign:center;>text-align:center;uidth:80px;>.title.Mtext-ilign:center;uidth:80px;>text-align:center;uidth:100px;>text-lign:center;u

9、idth:80px;text-align:center;uidth:60px;>.line(backqround-color:tta7cbff;height:3px;>.shoplnfo<padding-left:1Opx;height:3Spx;uprtical-4lign:botton;).nun_inputborder:solidipxtt666;uidth:25px;height:15Px;text-align:center;>_7,.cart_td_8(.cart_td_1,-Cirt_td_2».cart_td_3».cart_td_5&

10、#187;.cart_td_6,background-color:tte2F2Ff;border-bottoiw:solid1pxttdlecFF;border-top:solid1pxttdlecfF;text-alignreenter;padding:Spx;>.carttd1,.C4rttd3,.carttd&,CJrttd5».carttd6V.c<irttd7border-right:solidIpx«FFF;>.cart_td_3<text-align:left;>.cart_td_4<Font-wight:bold;

11、>.cart_td_7<Font-weight:bold;color:ttFe6i«0D;font-size:1>ipx;-hand<cursor:pointer;>.shopendftext-align:right;padding-right:lOpx;padding-botton:10px;>.ycllow<Font-weight:bold;color:8Fe6h00;Font-size:18px;line-height:>iOpx;2.myCart.js/J«Url$iC：rLpl：l&DCiUjBFlit门改变

12、所购商品的数量”_,.ifun-DtiDHDtiangEMntnunlilJlwgN/*num硬亭时应商品数量的文本框10,E网表不是增加还是双少商品戮量MvarnunId=documpint.getElenentByld加匕Id);1 F(flag-ninWH/Tfi少新&数量7iF(nuRlildvalije<"1Ka1erH“宝贝射量也须是大于肥)二r申turnFl5；elsenureld.V31u«ispairs?lnt(numlprod>ui：tCQunt();elseH-F1agarid，增加战品散量*/nun：d.<ialu-par5

13、entCnumld.ualut)«1;produictCount();,自动计算商品的总嚏颔.氢甘节省的金瓶和枳分寸FuniCt1anprodiietCaunit()vartotal-0-，/面品宝葡急计varintegralfl;/E五司呈史子varwaroarpaint;price;number;subtotal;T3商曲的.工福F限开包每/一品品品一胃的单敷小，也向m为的叩p>呷表格中所有的行融，urrayTaU'leTr-fliacuniit.iietiElfn»ntByildC'shappiinFg'-1)BqetElpw-ntTiq

14、Niiffii-(""tr11");ifCdnyTablelraengltli>flHmar工=1；1现1日而。11£四取卜;:1*”仃青从中开始|1篝一行的标题可计算，i1=(iJj|>lfIrieHEMifiE匕Hyl叫碗陛(气旷)。叫上心之j/7最后一行不计较pDinit-fiplablelri.getEleRentsByTag3.1mnerHlTM.;price«mrablelr<i.getElernentsByTagName('"td")iximnerHliML;n'umtier=

15、ii5iTabl?Tr|iagetElFme!nt5ByTagli<anF(,stdiM)i5LgptElewntsByTagHdiBe'(fi,iniputs,)3.valu?;integrral4-piiintnuriber;total*-price脚mnnberimjjIableTri).getEiraeratsEgTagiName(BitdBi|力.innerHTML-price*nunDer;docurwiitrgFtlEleMntEyiId(Htotalw).inntrHIiHL-tvtal;dacunent.getElementEyld("lnttgral

16、"').innei-HIIIL-int;uifidou.onload-productCaumt;"复选框堂选或至不进豉果廿fuftctianselrctAHOfv"d1nput-dD£unmentgetElen&ntsKlybiaiw('"cartCheekDox,a)ifor(ueri-a；i<o£nput.length;i1«*)LiipUt:i_CllriC：kf,|i1(l|iJC：IJ-rifittF1tmrnIByld(!"1CltrclkBtiMH)BChUCkid;,嘴

17、据埴个复选栏的选择看优丽定全选复选框是否裱选中/runDtionselBCtSingl?C)vark-fl;VTinput"lJl$t：nnrnt,4脾t昨tSftiH.irw(HCtChvckBn"11)for("uari"0：iCoInput.length;1*>if(oInputi.ch?cke(l»falstHk=1;br»ak;NLF(k»O)(doizunent.getElenentByld('"alIClheckBc*皿).cnecMeil-true;el5e<doieijntnt

18、.getflFnrntBy>ld('"allCheckBio&c,J).checked"false;，”册赊单行商品”FunctiondelEteRou(t1owld>srIn>dFKEdocium?inIt.getE1?m?ntById(d).rouIpeIfk;茯用当£行的索引号idacurv*nt.getflenintE7ldfu£h口pping").tfN口0(1indies);dlocunent.getElenentoj/1d(1'shopping"1).<felet&

19、RDW(lnd&M1);proJuctCaantO;)/硼陈选中行的商品"利KtlafldtlebK&eLedtlxiHilSi(uaroInput-docunentetEle雕瞰工时也睡飞日我皿砧口。广h|幄rMex;For3金i-Dlnput.lfngth-1ifCnlnut|i.checi«e<l-*truf)(Innteg?tEIPmM旬<doInpHt1.valu”.mwlnrlfm;，云果选中行的.引号/dDCUHvmlt.grtEId(4isliDfipinqi,').drirtrRDwCEndhric);ducuniL&#

20、39;nt,ge-LEiHieiitBld("“1呷.咽。.靠Lt*LtAuujlndrx-1】；pr(Mlu«tiCoiint();3.myCart.html人FTRTUA¥WUZ<WCTYPEhlEKlPUBLIC-ai-/WC/DT»XHTM.1.linn纪t匕川1，"相'“lit".的.Fg/TIt/泥2血1FDTD，HEnl"l-ELnrul!AtziT学<hi>s*|A$-"ht墨,Jww.ad.rg,iqMFMhi.ir")<heisd><M-ta

21、htt-Rqudv-llCDibt*nl:-lyv11CMtPntbvHt/febHl：dhirsrt-fbSSiS"/>仃£”由尚工购将年页而。门外<linkhrtF-"C5i/wyC-srt.cs5'rl卯丁-brut*”51-"打皿hsL/><scrlptt却Rdm邛;|*M"rifriLkfe*Js/iqFCart-ipt>心<M#Id-MadarXiMcKC-*Mugoc/taDbja_9oga_fIf"妙"心”1心<(PivW,9”>拒的也RCdkrwr3百

22、页Z/a>>Co11rtiF寸找由沟宝。心>我的胸物耳"时心<diiv痴1dicU3S-MllS-tjr(?d_le'HiS></liJ'<licla5s-'rBaMli3.t_rrd"71,古#K)糊耳。11>< 11c”即FulHC/il>< 11cU55-niiMllS.CgrdMr>t,叫ii订单侑房< 11cIa=5-ryMvlis.tqiayi_*rinrT>C/ll><11clAS>"fiauliit_grd'>

23、3.付技到支忖主<11CU55-MU11S.I_yry_irrii-></lt3'<11class_in3Ulist_grjf_,>ii.割认收货.11<11£lass-,lBavllst_grdy>_aKravai,></lij<11;ull£匚"肃产<liclBss-WHlls-tZgi-ayi_righf>C/li></ul></alu>«fvid-"t«ntwrt">stablewldth»r

24、K1il*t"DrdBr*"匚<4J,叩uing'EFMlliddinq-"*'id»"shaM>ing"?a比门口n-J3ThMi-“p”LndA*”到千”<tr>Ctdclass-titlo1mXinrwtii#-"allCh«kBoM"叫pE<:hP!：kfci>K''DnclicfcB"5elei:tflIlC)""-鱼逃"EA<tddm“hwl*mn.'h>店铺宝贝&q

25、uot;CtdCll53»*titlE吨也11元)<idcIJc/Edi<VdcUss-tlllfZ*->AvTj元)t/1心Ctdclass-title7"xftfp：</td5<tr><td“IsmyfW'cl«5s-"linr">-</til></tr><tr><td冗lspm，W,日局551f口pl：n+，店Mi<jhr”'F_>奸巧百姐时,酷堵“心市烹iJIieF''<个纤.巧曰邂"心&

26、lt;ipqwc-,BiPWQr5/t.MJbaa_r*latiw!.jpgFdlt'rclAtlDn111</fcr>£tH""pinAwtl"?CtdcIa5ss<aKt_t<1">liiputnkiw-llc«-tCh«cikBDNir1押口/”却pMb«K”uj|itiF-,pr*duct1-Dncllcka"5eiFctSikglrf"/></«><Ed上心飞班£-3飞“>"«1

27、9w*:!a第心，1“”口art如altjnq'7></Ed>«d“右用-一«七二h"-F"临行风邛尚美唐鼠爰卷带来宇惜图金M展跑心主靠子里包。仆C/?«&=想色尺列工37<br/5深聋黄呵外£“12犷"7gmu_:U<fcn_ri-J眄“dlt->lic<MJI舞煌t:心WcIJS5-wrt_«_*">5</td>Ctdcla5s-"<ar-ttt_5">1M.WZtd><td工&qu

28、ot;tn尸SH£-dlliugrK/cda*aD_MiiHE.jp21mnuLbnclicjk-llchkngNuAC1nun_11.11cUfis-,uhand,*/>di*ut£ldi-u，_iafcyp*.fefiiHt-cld5S-nUB_8npuli4LfSrfi-i*rig«Y/ldn&*f_dddS«g.jpa"乳ErM"»»c：llefc-clMn5wiWjR("up_1g"addr)"心CtdcIas5-rrcartiM_7"X/td>

29、<kdclass-Mc.aKt_t«_B"Xahref-"aujscrlpt'pif«luct1'j厂)，豚"3仃上心<tdchrrf-Jduduript'pruutT韩。#<7£i-><tr><(d，触即非r”。2$“3叩1高小>店械，3格遵我的笑乐三记仃舞妻能i<«hrXi'ir”由侬打吗弊&/工耳0"_四萩1口小加/jlt-"rEl*tinn,r/X/t®S”口产1f-J>pK0Mr2a&g

30、t;><tdclH55-c-Brt_t*_1i,><jputrwiw-!GjrltCh«BnM,pt；ypp-cihrr：hb#K!MjJ«r-"pr#ductZ"Dnclick-"wlFDtSijlE<)"CtdcIass-caKt_t<_2"><ifigsrc'iiwgFrs/tjabancurt鞫.叱'dt*aishaM>ing"/>C/t1|)<kdElm钎，”匚t二-产一'"hLknaj古奈木7苦并靠族为魅

31、力唇膏3.4gC”ib/>保障-3FT"!iPM»r5/tdfl*do_lciRi_»i,jpg,:独/>tapgarc叫eus八“bgJiEn_<nJpeT*lf"icw5!心"无心CtdcIa=s*cart_t4_ii">12C/td5<kd工二t二5“>2监.M<1Ms<tdcfiagjpHall-Rinu5-oriciicii5-!cMngt*«(nun_7'FRi«usspcld35-hdndr/>Clnrul1*Fu，_7_cldss-nun

32、input"日日的4山什七*dcrnlv"八<£hi5rL'lMqE/h口b-wadding.ipqTalt-"add"rlick",i:hjn<fHiJH(rv>un2rs'ddrF'cll*j5-,h.»l,7><7td><fcdcIass-Mc.arlt_t*_7"></t<i><(d""-仙/近汨|：*1日"痴'prWuCC?-)5cCtr><td也|6m曲”宣1

33、即livfer)店铺-Hra-"r*¥麦怵好营，毅要事.*.h"干“”林慈店精仃处工。呵口信阿"Air-'VelirlaA-</fcr><krM-'pr口AW学，Ctdcl-a53-cart_t«_1i"><i«puti*#jw!EjrtCh«kBaMtpr-ctirchbm5'!uj'lwr-"pr#ductr-nnclirk-'3*lrct5iingl(!CtdcIa=s"s"'csrejab>Dc

34、jrt43.jrg"dlt*llshaM>lngll7>C/td)让d工1"三飞”匚1.二寸,>"加有冉笆道清洋陆皮液1加二晨开白</a><br尸保障一Ciag3e-Fpm#"匕"0Qfwi_W-(PsrJlt-'lci-/>Hpg3rr-!tiR*iFS/l4*bflu_jicfln_0,Jpu"/3c/td><tdcIass-cCtdcl”工七"匚七)“Mk»<”><cdC：45g-tir81rtlHll-Fi汕厂前。lid&quo

35、t;GMnj|a厂NdSKIiHfl旷门<lmpvl1*FU_S_chW'nuMinput"Fdqi»hr”rfMHiMl!/V><in«sric-"iiMqn/tjntKMiadding.jpqTalt-dd"wirlick'rhjnuFNiJPH_nuii_3B41addr3"El455-hw«ii,7><7td><kdclass-Mcart_t<7,><!/td><ZCr>Ctr>31印修一日“叩ln+.a>宙梢”“fer>红亘耳的小屋“心卖盍i心口巨豆“心<EiMjgi1sH"'iz.s/ng:口.EuHjJpg11alt-,YeKtinn'""仃U>"kn<tvIfl'prdaatirq">Ctdci-put刖旷卬由LErHEFM4lwr-!pr»fluct*i-onelic：k"!3JelrctSi»