js购物车实战.doc

1 myCart.csscharset gb2312;/* CSS Document */bodymargin:0px;padding:0px;font-size:12px;line-height:20px;color:#333; ul,li,ol,h1,dl,ddlist-style:none;margin:0px;padding:0px;acolor:#1965b3; text-decoration: none; a:hovercolor:#CD590C;text-decoration:underline;imgborder:0px;vertical-align:middle;#headerheight:40px;margin:10px auto 10px auto;width:800px;clear:both;#navmargin:10px auto 10px auto;width:800px;clear:both;#navlistwidth:800px;margin:0px auto 0px auto;height:23px;#navlist lifloat:left;height:23px;line-height:26px;.navlist_red_leftbackground-image:url(./images/taobao_bg.png);background-repeat:no-repeat;background-position:-12px -92px;width:3px;.navlist_redbackground-color:#ff6600;text-align:center;font-size:14px;font-weight:bold;color:#FFF;width:130px;.navlist_red_arrowbackground-color:#ff6600;background-image:url(./images/taobao_bg.png);background-repeat:no-repeat;background-position:0px 0px;width:13px;.navlist_graybackground-color:#e4e4e4;text-align:center;font-size:14px;font-weight:bold;width:150px;.navlist_gray_arrowbackground-color:#e4e4e4;background-image:url(./images/taobao_bg.png);background-repeat:no-repeat;background-position:0px 0px;width:13px;.navlist_gray_rightbackground-image:url(./images/taobao_bg.png);background-repeat:no-repeat;background-position:-12px -138px;width:3px;#contentwidth:800px;margin:10px auto 5px auto;clear:both;.title_1text-align:center;width:50px;.title_2text-align:center;.title_3text-align:center;width:80px;.title_4text-align:center;width:80px;.title_5text-align:center;width:100px;.title_6text-align:center;width:80px;.title_7text-align:center;width:60px;.linebackground-color:#a7cbff;height:3px;.shopInfopadding-left:10px;height:35px;vertical-align:bottom;.num_inputborder:solid 1px #666;width:25px;height:15px;text-align:center;.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8background-color:#e2f2ff;border-bottom:solid 1px #d1ecff;border-top:solid 1px #d1ecff;text-align:center;padding:5px;.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7border-right:solid 1px #FFF;.cart_td_3text-align:left;.cart_td_4font-weight:bold;.cart_td_7font-weight:bold;color:#fe6400;font-size:14px;.handcursor:pointer;.shopendtext-align:right;padding-right:10px;padding-bottom:10px;.yellowfont-weight:bold;color:#fe6400;font-size:18px;line-height:40px;2 register.csscharset gb2312;/* CSS Document */body,dl,dt,dd,div,form padding:0;margin:0;#header,#mainwidth:650px;margin:0 auto;.bgbackground-image:url(./images/register_bg.gif);background-repeat:no-repeat;width:6px;height:6px;.bg_top_leftbackground-position:0px 0px;.bg_top_rightbackground-position:0px -6px;.bg_end_leftbackground-position:0px -12px;.bg_end_rightbackground-position:0px -18px;.bg_topborder-top:solid 1px #666666;.bg_endborder-bottom:solid 1px #666666;.bg_leftborder-left:solid 1px #666666;.bg_rightborder-right:solid 1px #666666;.contentpadding:10px;.inputsborder:solid 1px #a4c8e0;width:150px;height:15px;.userWidthwidth:110px;.content divfloat:left;font-size:12px;color:#000;dlclear:both;dt,ddfloat:left;dtwidth:130px;text-align:right;font-size:14px;height:30px;line-height:25px;ddfont-size:12px;color:#666666;width:180px;.import_promptborder:solid 1px #ffcd00;background-color:#ffffda;padding-left:5px;padding-right:5px;line-height:20px;.error_promptborder:solid 1px #ff3300;background-color:#fff2e5;background-image:url(./images/li_err.gif);background-repeat:no-repeat;background-position:5px 2px;padding:2px 5px 0px 25px;line-height:20px;.ok_promptborder:solid 1px #01be00;background-color:#e6fee4;background-image:url(./images/li_ok.gif);background-repeat:no-repeat;background-position:5px 2px;padding:2px 5px 0px 25px;line-height:20px;3 myCart.js/ JavaScript Documentfunction changeNum(numId,flag)var numId=document.getElementById(numId);if(flag=minus)if(numId.value=1)alert();return false;elsenumId.value=parseInt(numId.value)-1;productCount();elsenumId.value=parseInt(numId.value)+1;productCount();function productCount()var total=0; var integral=0; var point; var price; var number; var subtotal; var myTableTr=document.getElementById(shopping).getElementsByTagName(tr); if(myTableTr.length0)for(var i=1;imyTableTr.length;i+) if(myTableTri.getElementsByTagName(td).length2) point=myTableTri.getElementsByTagName(td)3.innerHTML; price=myTableTri.getElementsByTagName(td)4.innerHTML;number=myTableTri.getElementsByTagName(td)5.getElementsByTagName(input)0.value;integral+=point*number;total+=price*number;myTableTri.getElementsByTagName(td)6.innerHTML=price*number;document.getElementById(total).innerHTML=total;document.getElementById(integral).innerHTML=integral;window.onload=productCount;function selectAll()var oInput=document.getElementsByName(cartCheckBox); for (var i=0;ioInput.length;i+) oInputi.checked=document.getElementById(allCheckBox).checked;function selectSingle()var k=0;var oInput=document.getElementsByName(cartCheckBox); for (var i=0;ioInput.length;i+) if(oInputi.checked=false) k=1; break; if(k=0)document.getElementById(allCheckBox).checked=true;elsedocument.getElementById(allCheckBox).checked=false;function deleteRow(rowId)var Index=document.getElementById(rowId).rowIndex; document.getElementById(shopping).deleteRow(Index);document.getElementById(shopping).deleteRow(Index-1);productCount();function deleteSelectRow()var oInput=document.getElementsByName(cartCheckBox);var Index; for (var i=oInput.length-1;i=0;i-) if(oInputi.checked=true) Index=document.getElementById(oInputi.value).rowIndex; document.getElementById(shopping).deleteRow(Index); document.getElementById(shopping).deleteRow(Index-1); productCount();register.JS/ JavaScript Documentfunction $(elementId)return document.getElementById(elementId);function userNameFocus()var userNameId=$(userNameId);userNameId.className=import_prompt;userNameId.innerHTML=;function userNameBlur()var userName=$(userName);var userNameId=$(userNameId);var reg=/0-9a-zA-Z0-9a-zA-Z_.-2,160-9a-zA-Z$/;if(userName.value=)userNameId.className=error_prompt;userNameId.innerHTML=;return false;if(reg.test(userName.value)=false)userNameId.className=error_prompt; userNameId.innerHTML=;return false;userNameId.className=ok_prompt; userNameId.innerHTML=;return true;function pwdFocus()var pwdId=$(pwdId);pwdId.className=import_prompt;pwdId.innerHTML=;function pwdBlur()var pwd=$(pwd);var pwdId=$(pwdId);if(pwd.value=)pwdId.className=error_prompt;pwdId.innerHTML=;return false;if(pwd.value.length6 | pwd.value.length16)pwdId.className=error_prompt; pwdId.innerHTML=;return false;pwdId.className=ok_prompt; pwdId.innerHTML=;return true;function repwdBlur()var repwd=$(repwd);var pwd=$(pwd);var repwdId=$(repwdId);if(repwd.value=)repwdId.className=error_prompt;repwdId.innerHTML=;return false;if(repwd.value!=pwd.value)repwdId.className=error_prompt; repwdId.innerHTML=;return false;repwdId.className=ok_prompt; repwdId.innerHTML= ;return true;function nickNameFocus()var nickNameId=$(nickNameId);nickNameId.className=import_prompt;nickNameId.innerHTML=;function nickNameBlur()var nickName=$(nickName);var nickNameId=$(nickNameId);var k=0;var reg=/(u4e00-u9fa5|w|!#$%*)+$/; var chinaReg=/u4e00-u9fa5/g; if(nickName.value=)nickNameId.className=error_prompt;nickNameId.innerHTML=;return false;if(reg.test(nickName.value)=false)nickNameId.className=error_prompt; nickNameId.innerHTML=return false;var len=nickName.value.replace(chinaReg,ab).length; if(len4|len20)nickNameId.className=error_prompt; nickNameId.innerHTML=return false;nickNameId.className=ok_prompt; nickNameId.innerHTML=;return true;function telFocus()var telId=$(telId);telId.className=import_prompt;telId.innerHTML=;function telBlur()var tel=$(tel);var telId=$(telId);var reg=/(13|15|18)d9$/;if(tel.value=)telId.className=error_prompt;telId.innerHTML=;return false;if(reg.test(tel.value)=false)telId.className=error_prompt; telId.innerHTML=;return false;telId.className=ok_prompt; telId.innerHTML=;return true;function emailFocus()var emailId=$(emailId);emailId.className=import_prompt;emailId.innerHTML=;function emailBlur()var email=$(email);var emailId=$(emailId);var reg=/w+w+(.a-zA-Z2,3)1,2$/;if(email.value=)emailId.className=error_prompt;emailId.innerHTML=;return false;if(reg.test(email.value)=false)emailId.className=error_prompt; emailId.innerHTML=;return false;emailId.className=ok_prompt; emailId.innerHTML= ;return true;function checkForm() var flagUserName=userNameBlur(); var flagPwd=pwdBlur(); var flagRepwd=repwdBlur(); var flagNickName=nickNameBlur(); var flagTel=telBlur(); var flagEmail=emailBlur(); userNameBlur(); pwdBlur(); repwdBlur(); nickNameBlur(); telBlur(); emailBlur(); if(flagUserName=true flagPwd=true flagRepwd=true flagNickName=trueflagTel=trueflagEmail=true) return true; elsereturn false;myCart.html!DOCTYPE html PUBLIC html xmlns=http: headmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title/titlelink href=css/myCart.css type=text/css rel=stylesheet /script type=text/javascript src=js/myCart.js/script/headbodydiv id=headerimg src=images/taobao_logo.gif alt=logo /divdiv id=nava href=#/a a href=#/a /divdiv id=navlist ul li class=navlist_red_left/li li class=navlist_red/li li class=navlist_red_arrow/li li class=navlist_gray/li li class=navlist_gray_arrow/li li class=navlist_gray/li li class=navlist_gray_arrow/li li class=navlist_gray/li li class=navlist_gray_arrow/li li class=navlist_gray/li li class=navlist_gray_right/li /ul/divdiv id=content table width=100% border=0 cellspacing=0 cellpadding=0 id=shopping form action= method=post name=myform tr td class=title_1input id=allCheckBox type=checkbox value= onclick=selectAll() /td td class=title_2 colspan=2 td class=title_4/td td class=title_5/td td class=title_6/td td class=title_7/td /tr tr td colspan=8 class=line/td /tr tr td colspan=8 class=shopInfoa href=#/a a href=#/a img src=images/taobao_relation.jpg alt=relation /td /tr tr id=product1 td class=cart_td_1input name=cartCheckBox type=checkbox value=product1 onclick=selectSingle() /td td class=cart_td_2img src=images/taobao_cart_01.jpg alt=shopping/td td class=cart_td_3a href=#/a br / br / img src=images/taobao_icon_01.jpg alt=icon /td td class=cart_td_45/td td class=cart_td_5138.00/td td class=cart_td_6img src=images/taobao_minus.jpg alt=minus onclick=changeNum(num_1,minus) class=hand/ input id=num_1 type=text value=1 class=num_input readonly=readonly/ img src=images/taobao_adding.jpg alt=add onclick=changeNum(num_1,add) class=hand/td td class=cart_td_7/td td class=cart_td_8a href=javascript:deleteRow(product1);/a/td /tr tr td colspan=8 class=shopInfoa href=#/a a href=#lokemick2009/a img src=images/taobao_relation.jpg alt=relation /td /tr tr id=product2 td class=cart_td_1input name=cartCheckBox type=checkbox value=product2 onclick=selectSingle() /td td class=cart_td_2img src=images/taobao_cart_02.jpg alt=shopping/td td class=cart_td_3a href=#chanel/abr / img src=images/taobao_icon_01.jpg alt=icon / img src=images/taobao_icon_02.jpg alt=icon /td td class=cart_td_412/td td class=cart_td_5265.00/td td class=cart_td_6img src=images/taobao_minus.jpg alt=minus onclick=changeNum(num_2,minus) class=hand/ input id=num_2 type=text value=1 class=num_input readonly=readonly/ img src=images/taobao_adding.jpg alt=add onclick=changeNum(num_2,add) class=hand/td td class=cart_td_7/td td class=cart_td_8a href=javascript:deleteRow(product2);/a/td /tr tr td colspan=8 class=shopInfoa href=#/a a href=#/a img src=images/taobao_relation.jpg alt=relation /td /tr tr id=product3 td class=cart_td_1input name=cartCheckBox type=checkbox value=product3 onclick=selectSingle()/td td class=cart_td_2img src=images/taobao_cart_03.jpg alt=shopping/td td class=cart_td_3a href=#/abr / img src=images/taobao_icon_01.jpg alt=icon / img src=images/taobao_icon_02.jpg alt=icon /td td class=cart_td_43/td td class=cart_td_585.00/td td class=cart_td_6img src=images/taobao_minus.jpg alt=minus onclick=changeNum(num_3,minus) class=hand/ input id=num_3 type=text value=1 class=num_input readonly=readonly/ img src=images/taobao_adding.jpg alt=add onclick=changeNum(num_3,add) class=hand/td td class=cart_td_7/td td class=cart_td_8a href=javascript:deleteRow(product3);/a/td /tr tr td colspan=8 class=shopInfoa href=#/a a href=#taobao/a img src=images/taobao_relation.jpg alt=relation /td /tr tr id=product4 td class=cart_td_1input name=cartCheckBox type=checkbox value=product4 onclick=selectSingle() /td td class=cart_td_2img src=images/taobao_cart_04.jpg alt=shopping/td td class=cart_td_3a href=#/abr / img src=images/taobao_icon_01.jpg alt=icon /td td class=cart_td_412/td td class=cart_td_512.00/td td class=cart_td_6img src=images/taobao_minus.jpg alt=minus onclick=changeNum(num_4,minus) class=hand/ input id=num_4 type=text value=2 class=num_input readonly=readonly/ img src=images/taobao_adding.jpg alt=add onclick=changeNum(num_4,add) class=hand/td td class=cart_td_7/td td class=cart_td_8a href=javascript:deleteRow(product4);/a/td /tr tr td colspan=3a href=javascript:deleteSelectRow()img src=images/taobao_del.jpg alt=delete/a/td td colspan=5 class=shopendlabel id=total class=yellow/label br / label class=yellow id=integral/label br / input name= type=image src=images/taobao_subtn.jpg /td /tr /form/table/div/body/htmlregister.html!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title/titlelink