js購物車實(shí)戰(zhàn)

1、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:mi

2、ddle;#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);ba

3、ckground-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;backgr

4、ound-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_gr

5、ay_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:

6、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:ce

7、nter;.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

8、;.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&q

9、uot;/* 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_leftback

10、ground-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;.

11、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;pa

12、dding-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;back

13、ground-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("&qu

14、ot;);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").getElementsB

15、yTagName("tr"); if(myTableTr.length>0)for(var i=1;i<myTableTr.length;i+) if(myTableTri.getElementsByTagName("td").length>2) point=myTableTri.getElementsByTagName("td")3.innerHTML; price=myTableTri.getElementsByTagName("td")4.innerHTML;number=myTableTr

16、i.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&

17、quot;).innerHTML=integral;window.onload=productCount;function selectAll()var oInput=document.getElementsByName("cartCheckBox"); for (var i=0;i<oInput.length;i+) oInputi.checked=document.getElementById("allCheckBox").checked;function selectSingle()var k=0;var oInput=document.ge

18、tElementsByName("cartCheckBox"); for (var i=0;i<oInput.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.get

19、ElementById(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;

20、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 doc

21、ument.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,16

22、0-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" use

23、rNameId.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"pwd

24、Id.innerHTML=""return false;if(pwd.value.length<6 | pwd.value.length>16)pwdId.className="error_prompt" pwdId.innerHTML=""return false;pwdId.className="ok_prompt" pwdId.innerHTML=""return true;function repwdBlur()var repwd=$("repwd");v

25、ar 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.classN

26、ame="ok_prompt" repwdId.innerHTML=" "return true;function nickNameFocus()var nickNameId=$("nickNameId");nickNameId.className="import_prompt"nickNameId.innerHTML=""function nickNameBlur()var nickName=$("nickName");var nickNameId=$("nick

27、NameId");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" nickNam

28、eId.innerHTML=return false;var len=nickName.value.replace(chinaReg,"ab").length; if(len<4|len>20)nickNameId.className="error_prompt" nickNameId.innerHTML="return false;nickNameId.className="ok_prompt" nickNameId.innerHTML=""return true;function telF

29、ocus()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

30、 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"email

31、Id.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.classN

32、ame="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 flag

33、Tel=telBlur(); var flagEmail=emailBlur(); userNameBlur(); pwdBlur(); repwdBlur(); nickNameBlur(); telBlur(); emailBlur(); if(flagUserName=true &&flagPwd=true &&flagRepwd=true &&flagNickName=true&&flagTel=true&flagEmail=true) return true; elsereturn false;myCart.ht

34、ml<!DOCTYPE html PUBLIC ""><html xmlns="http: "><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><link href="css/myCart.css" type="text/css" rel="styleshe

35、et" /><script type="text/javascript" src="js/myCart.js"></script></head><body><div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div><div id="nav"><a href="#&quo

36、t;></a> > <a href="#"></a> > </div><div id="navlist"> <ul> <li class="navlist_red_left"></li> <li class="navlist_red"></li> <li class="navlist_red_arrow"></li> <li cl

37、ass="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_

38、arrow"></li> <li class="navlist_gray"></li> <li class="navlist_gray_right"></li> </ul></div><div id="content"> <table width="100%" border="0" cellspacing="0" cellpadding="0&quo

39、t; id="shopping"> <form action="" method="post" name="myform"> <tr> <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" /></td> <td cla

40、ss="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="

41、;line"></td> </tr> <tr> <td colspan="8" class="shopInfo"><a href="#"></a> <a href="#"></a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr i

42、d="product1"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td> <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" al

43、t="shopping"/></td> <td class="cart_td_3"><a href="#"></a> <br /> <br /> <img src="images/taobao_icon_01.jpg" alt="icon" /></td> <td class="cart_td_4">5</td> <td class="

44、cart_td_5">138.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text" value="

45、;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 cl

46、ass="cart_td_8"><a href="javascript:deleteRow('product1');"></a></td> </tr> <tr> <td colspan="8" class="shopInfo"><a href="#"></a> <a href="#">lokemick2009</a> <img s

47、rc="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product2"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /&g

48、t;</td> <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">chanel/</a><br /> <img src="images/taobao_icon_01.jpg" alt="i

49、con" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> <td class="cart_td_4">12</td> <td class="cart_td_5">265.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" al

50、t="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=

51、"add" onclick="changeNum('num_2','add')" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:deleteRow('product2');"></a></td> </t

52、r> <tr> <td colspan="8" class="shopInfo"><a href="#"></a> <a href="#"></a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product3"> <td

53、 class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()"/></td> <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td

54、> <td class="cart_td_3"><a href="#"></a><br /> <img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> <td class="cart_td_4">3&l

55、t;/td> <td class="cart_td_5">85.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type=

56、"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&qu

57、ot;></td> <td class="cart_td_8"><a href="javascript:deleteRow('product3');"></a></td> </tr> <tr> <td colspan="8" class="shopInfo"><a href="#"></a> <a href="#">taob

58、ao</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product4"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="se

59、lectSingle()" /></td> <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#"></a><br /> <img src="images/taobao_icon_01.jpg&qu

60、ot; alt="icon" /></td> <td class="cart_td_4">12</td> <td class="cart_td_5">12.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4',

61、9;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','ad

62、d')" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:deleteRow('product4');"></a></td> </tr> <tr> <td colspan="3"><a href=&qu

63、ot;javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete"/></a></td> <td colspan="5" class="shopend"><label id="total" class="yellow"></label> <br /> <label class=&qu

64、ot;yellow" id="integral"></label> <br /> <input name=" " type="image" src="images/taobao_subtn.jpg" /></td> </tr> </form></table></div></body></html>register.html<!DOCTYPE html PUBLIC "

65、;-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></tit

66、le><link type="text/css" rel="stylesheet" href="css/register.css" /><script type="text/javascript" src="js/register.js"></script></head><body><div id="header"><img src="images/register_logo.gif

67、" alt="logo"/></div><div id="main"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="bg bg_top_left"></td> <td class="bg_top"></td> &

68、lt;td class="bg bg_top_right"></td> </tr> <tr> <td class="bg_left"></td> <td class="content"> <form action="" method="post" name="myform" onsubmit="return checkForm()"> <dl> <dt></dt> <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userName