效果图
html部分
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网购物车页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
html部分
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网购物车页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body>
<!--中间部分开始-->
<br/><br/>
<div id="main">
<div> <img src="images/shopping_myshopping.gif" alt="shopping"></div>
<!--为您推荐商品开始-->
<div class="shopping_commend">
<div class="shopping_commend_left">根据您挑选的商品,当当为您推荐</div>
<div class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow" onClick="shopping_commend_show()"></div>
</div>
<div id="shopping_commend_sort">
<div class="shopping_commend_sort_left">
<ul id="ul1">
<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>
<li class="shopping_commend_list_2">¥39.00</li>
<li class="shopping_commend_list_3">¥29.30</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul1')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul2">
<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁(当当网独家首发)</a></li>
<li class="shopping_commend_list_2">¥28.00</li>
<li class="shopping_commend_list_3">¥19.40</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul2')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul3">
<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王(金融危机下房地产行...</a></li>
<li class="shopping_commend_list_2">¥32.80</li>
<li class="shopping_commend_list_3">¥25.10</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul3')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul4">
<li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>
<li class="shopping_commend_list_2">¥36.00</li>
<li class="shopping_commend_list_3">¥27.70</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul4')" class="shopping_yellow">购买</a></li>
</ul>
</div>
<div class="shopping_commend_sort_mid"></div>
<div class="shopping_commend_sort_left">
<ul id="ul5">
<li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>
<li class="shopping_commend_list_2">¥59.00</li>
<li class="shopping_commend_list_3">¥47.20</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul5')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul6">
<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家(马未都、王刚推荐!央...</a></li>
<li class="shopping_commend_list_2">¥34.80</li>
<li class="shopping_commend_list_3">¥20.60</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul6')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul7">
<li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说:一...</a></li>
<li class="shopping_commend_list_2">¥39.80</li>
<li class="shopping_commend_list_3">¥30.50</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul7')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul8">
<li class="shopping_commend_list_1">·<a href="#" class="blue">国戏(以麻将术语解读宦海沉浮...</a></li>
<li class="shopping_commend_list_2">¥25.00</li>
<li class="shopping_commend_list_3">¥17.30</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul8')" class="shopping_yellow">购买</a></li>
</ul>
</div>
</div>
<div class="shopping_list_top">您已选购以下商品</div>
<div class="shopping_list_border">
<!--中间部分开始-->
<br/><br/>
<div id="main">
<div> <img src="images/shopping_myshopping.gif" alt="shopping"></div>
<!--为您推荐商品开始-->
<div class="shopping_commend">
<div class="shopping_commend_left">根据您挑选的商品,当当为您推荐</div>
<div class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow" onClick="shopping_commend_show()"></div>
</div>
<div id="shopping_commend_sort">
<div class="shopping_commend_sort_left">
<ul id="ul1">
<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>
<li class="shopping_commend_list_2">¥39.00</li>
<li class="shopping_commend_list_3">¥29.30</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul1')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul2">
<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁(当当网独家首发)</a></li>
<li class="shopping_commend_list_2">¥28.00</li>
<li class="shopping_commend_list_3">¥19.40</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul2')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul3">
<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王(金融危机下房地产行...</a></li>
<li class="shopping_commend_list_2">¥32.80</li>
<li class="shopping_commend_list_3">¥25.10</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul3')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul4">
<li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>
<li class="shopping_commend_list_2">¥36.00</li>
<li class="shopping_commend_list_3">¥27.70</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul4')" class="shopping_yellow">购买</a></li>
</ul>
</div>
<div class="shopping_commend_sort_mid"></div>
<div class="shopping_commend_sort_left">
<ul id="ul5">
<li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>
<li class="shopping_commend_list_2">¥59.00</li>
<li class="shopping_commend_list_3">¥47.20</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul5')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul6">
<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家(马未都、王刚推荐!央...</a></li>
<li class="shopping_commend_list_2">¥34.80</li>
<li class="shopping_commend_list_3">¥20.60</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul6')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul7">
<li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说:一...</a></li>
<li class="shopping_commend_list_2">¥39.80</li>
<li class="shopping_commend_list_3">¥30.50</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul7')" class="shopping_yellow">购买</a></li>
</ul>
<ul id="ul8">
<li class="shopping_commend_list_1">·<a href="#" class="blue">国戏(以麻将术语解读宦海沉浮...</a></li>
<li class="shopping_commend_list_2">¥25.00</li>
<li class="shopping_commend_list_3">¥17.30</li>
<li class="shopping_commend_list_4"><a href="javascript:buyProduct('ul8')" class="shopping_yellow">购买</a></li>
</ul>
</div>
</div>
<div class="shopping_list_top">您已选购以下商品</div>
<div class="shopping_list_border">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="shopping_list_title">
<td class="shopping_list_title_1">商品名</td>
<td class="shopping_list_title_2">单品积分</td>
<td class="shopping_list_title_3">市场价</td>
<td class="shopping_list_title_4">当当价</td>
<td class="shopping_list_title_5">数量</td>
<td class="shopping_list_title_6">删除</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct">
<tr class="shopping_product_list" id="shoppingProduct_01">
<td class="shopping_product_list_1"><a href="#" class="blue">私募(首部披露资本博弈秘密的金融...</a></td>
<td class="shopping_product_list_2"><label>189</label></td>
<td class="shopping_product_list_3">¥<label>32.00</label></td>
<td class="shopping_product_list_4">¥<label>18.90 </label>(59折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_01')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_02">
<td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆(张爱玲最神秘小说遗稿)</a></td>
<td class="shopping_product_list_2"><label>173</label></td>
<td class="shopping_product_list_3">¥<label>28.00</label></td>
<td class="shopping_product_list_4">¥<label>17.30</label>(62折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_02')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_03">
<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
<td class="shopping_product_list_2"><label>154</label></td>
<td class="shopping_product_list_3">¥<label>24.80</label></td>
<td class="shopping_product_list_4">¥<label>15.40</label> (62折)</td>
<td class="shopping_product_list_5"><input type="text" value="2" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_03')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_04">
<td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
<td class="shopping_product_list_2"><label>358</label></td>
<td class="shopping_product_list_3">¥<label>458.00</label></td>
<td class="shopping_product_list_4">¥<label>358.00</label> (78折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_04')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_05">
<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 (原书第4版)</a></td>
<td class="shopping_product_list_2"><label>712</label></td>
<td class="shopping_product_list_3">¥<label>95.00</label></td>
<td class="shopping_product_list_4">¥<label>71.20</label> (75折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_05')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_06">
<td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>(再买¥68.30即可参加“满199元减10元现金”活动)</td>
<td class="shopping_product_list_2"><label>10</label></td>
<td class="shopping_product_list_3">¥<label>198.00</label></td>
<td class="shopping_product_list_4">¥<label>130.70</label> (66折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_06')" class="blue">删除</a></td>
</tr>
</table>
<div class="shopping_list_end">
<ul>
<li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif"></li>
<li class="shopping_list_end_2">¥<label id="product_total"></label></li>
<li class="shopping_list_end_3">商品金额总计:</li>
<li class="shopping_list_end_4">您共节省金额:¥<label class="shopping_list_end_yellow" id="product_save"></label><br/>
可获商品积分:<label class="shopping_list_end_yellow" id="product_integral"></label>
</li>
</ul>
</div>
</div>
</div>
</body>
<tr class="shopping_list_title">
<td class="shopping_list_title_1">商品名</td>
<td class="shopping_list_title_2">单品积分</td>
<td class="shopping_list_title_3">市场价</td>
<td class="shopping_list_title_4">当当价</td>
<td class="shopping_list_title_5">数量</td>
<td class="shopping_list_title_6">删除</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct">
<tr class="shopping_product_list" id="shoppingProduct_01">
<td class="shopping_product_list_1"><a href="#" class="blue">私募(首部披露资本博弈秘密的金融...</a></td>
<td class="shopping_product_list_2"><label>189</label></td>
<td class="shopping_product_list_3">¥<label>32.00</label></td>
<td class="shopping_product_list_4">¥<label>18.90 </label>(59折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" οnblur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_01')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_02">
<td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆(张爱玲最神秘小说遗稿)</a></td>
<td class="shopping_product_list_2"><label>173</label></td>
<td class="shopping_product_list_3">¥<label>28.00</label></td>
<td class="shopping_product_list_4">¥<label>17.30</label>(62折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_02')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_03">
<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
<td class="shopping_product_list_2"><label>154</label></td>
<td class="shopping_product_list_3">¥<label>24.80</label></td>
<td class="shopping_product_list_4">¥<label>15.40</label> (62折)</td>
<td class="shopping_product_list_5"><input type="text" value="2" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_03')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_04">
<td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
<td class="shopping_product_list_2"><label>358</label></td>
<td class="shopping_product_list_3">¥<label>458.00</label></td>
<td class="shopping_product_list_4">¥<label>358.00</label> (78折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_04')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_05">
<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 (原书第4版)</a></td>
<td class="shopping_product_list_2"><label>712</label></td>
<td class="shopping_product_list_3">¥<label>95.00</label></td>
<td class="shopping_product_list_4">¥<label>71.20</label> (75折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_05')" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_06">
<td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>(再买¥68.30即可参加“满199元减10元现金”活动)</td>
<td class="shopping_product_list_2"><label>10</label></td>
<td class="shopping_product_list_3">¥<label>198.00</label></td>
<td class="shopping_product_list_4">¥<label>130.70</label> (66折)</td>
<td class="shopping_product_list_5"><input type="text" value="1" onBlur="productCount()"></td>
<td class="shopping_product_list_6"><a href="javascript:deleteProduct('shoppingProduct_06')" class="blue">删除</a></td>
</tr>
</table>
<div class="shopping_list_end">
<ul>
<li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif"></li>
<li class="shopping_list_end_2">¥<label id="product_total"></label></li>
<li class="shopping_list_end_3">商品金额总计:</li>
<li class="shopping_list_end_4">您共节省金额:¥<label class="shopping_list_end_yellow" id="product_save"></label><br/>
可获商品积分:<label class="shopping_list_end_yellow" id="product_integral"></label>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS部分
@charset "gb2312";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#333333;
text-decoration: none;
}
a:hover{
color:#333333;
text-decoration:underline;
}
img{
border:0px;
}
.blue{
color:#1965b3;
text-decoration:none;
}
.blue:hover{
color:#1965b3;
text-decoration:underline;
}
#header,#main,#footer{
width:960px;
margin:0px auto 0px auto;
clear:both;
float:none;
}
*购物车页面样式开始*/
.shopping_commend{
background-image:url(../images/shopping_commend_bg.gif);
background-repeat:repeat-x;
height:21px;
border:solid 1px #999;
}
.shopping_commend_left{
float:left;
padding-left:10px;
}
.shopping_commend_right{
float:right;
padding-right:10px;
margin-top:3px;
}
.shopping_commend_right img{
cursor:pointer;
}
#shopping_commend_sort{
border:solid 1px #999;
border-top:0;
padding:5px 20px 5px 20px;
height:120px;
}
.shopping_commend_sort_left{
float:left;
width:450px;
}
.shopping_commend_sort_mid{
float:left;
width:15px;
background-image:url(../images/shopping_dotted.gif);
background-repeat:repeat-y;
height:120px;
}
.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.shopping_commend_list_4{
float:left;
height:30px;
line-height:30px;
}
.shopping_commend_list_1{
width:240px;
}
.shopping_commend_list_2{
width:70px;
text-align:center;
text-decoration:line-through;
color:#999;
}
.shopping_commend_list_3{
width:70px;
text-align:center;
}
.shopping_commend_list_4{
text-align:center;
width:65px;
}
.shopping_yellow{
color:#ED610C;
}
.shopping_yellow:hover{
color:#ED610C;
text-decoration:underline;
}
.shopping_list_top{
clear:both;
font-size:14px;
font-weight:bold;
margin-top:20px;
}
.shopping_list_border{
border:solid 2px #999;
}
.shopping_list_title{
background-color:#d8e4c6;
height:25px;
}
.shopping_list_title li{
float:left;
line-height:28px;
}
.shopping_list_title_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_list_title_2{
width:120px;
text-align:center;
}
.shopping_list_title_3{
width:120px;
text-align:center;
}
.shopping_list_title_4{
width:120px;
text-align:center;
}
.shopping_list_title_5{
width:70px;
text-align:center;
}
.shopping_list_title_6{
width:70px;
text-align:center;
}
.shopping_product_list{
background-color:#fefbf2;
height:40px;
}
.shopping_product_list input{
width:30px;
height:15px;
border:solid 1px #666;
text-align:center;
}
.shopping_product_list td{
line-height:35px;
border-bottom:dashed 1px #CCC;
}
.shopping_product_list_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_product_list_2{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_3{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_4{
width:120px;
text-align:center;
color:#191919;
}
.shopping_product_list_5{
width:70px;
text-align:center;
}
.shopping_product_list_6{
width:70px;
text-align:center;
}
.shopping_list_end{
background-color:#cddbb8;
height:60px;
}
.shopping_list_end li{
float:right;
}
.shopping_list_end_1{
margin:10px 10px 0px 10px;
}
.shopping_list_end_2{
font-weight:bold;
color:#BD3E00;
font-size:14px;
margin:15px 10px 0px 0px;
}
.shopping_list_end_3{
font-weight:bold;
font-size:14px;
margin:15px 0px 0px 15px;
}
.shopping_list_end_4{
border-right:solid 1px #666666;
margin:10px 0px 0px 15px;
padding-right:10px;
}
.shopping_list_end_yellow{
color:#BD3E00;
}
JS部分
// JavaScript Document
/*根据您挑选的商品,当当为您推荐部分的显示和隐藏*/
function shopping_commend_show(){
var imgid=$("#shopping_commend_arrow"); //图片箭头
var divid=$("#shopping_commend_sort"); //层的id
if(divid.css("display")=="none"){
divid.css("display","block");
imgid.attr("src","images/shopping_arrow_up.gif");
}else{
divid.css("display","none");
imgid.attr("src","images/shopping_arrow_down.gif");
}
}
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#333333;
text-decoration: none;
}
a:hover{
color:#333333;
text-decoration:underline;
}
img{
border:0px;
}
.blue{
color:#1965b3;
text-decoration:none;
}
.blue:hover{
color:#1965b3;
text-decoration:underline;
}
#header,#main,#footer{
width:960px;
margin:0px auto 0px auto;
clear:both;
float:none;
}
*购物车页面样式开始*/
.shopping_commend{
background-image:url(../images/shopping_commend_bg.gif);
background-repeat:repeat-x;
height:21px;
border:solid 1px #999;
}
.shopping_commend_left{
float:left;
padding-left:10px;
}
.shopping_commend_right{
float:right;
padding-right:10px;
margin-top:3px;
}
.shopping_commend_right img{
cursor:pointer;
}
#shopping_commend_sort{
border:solid 1px #999;
border-top:0;
padding:5px 20px 5px 20px;
height:120px;
}
.shopping_commend_sort_left{
float:left;
width:450px;
}
.shopping_commend_sort_mid{
float:left;
width:15px;
background-image:url(../images/shopping_dotted.gif);
background-repeat:repeat-y;
height:120px;
}
.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.shopping_commend_list_4{
float:left;
height:30px;
line-height:30px;
}
.shopping_commend_list_1{
width:240px;
}
.shopping_commend_list_2{
width:70px;
text-align:center;
text-decoration:line-through;
color:#999;
}
.shopping_commend_list_3{
width:70px;
text-align:center;
}
.shopping_commend_list_4{
text-align:center;
width:65px;
}
.shopping_yellow{
color:#ED610C;
}
.shopping_yellow:hover{
color:#ED610C;
text-decoration:underline;
}
.shopping_list_top{
clear:both;
font-size:14px;
font-weight:bold;
margin-top:20px;
}
.shopping_list_border{
border:solid 2px #999;
}
.shopping_list_title{
background-color:#d8e4c6;
height:25px;
}
.shopping_list_title li{
float:left;
line-height:28px;
}
.shopping_list_title_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_list_title_2{
width:120px;
text-align:center;
}
.shopping_list_title_3{
width:120px;
text-align:center;
}
.shopping_list_title_4{
width:120px;
text-align:center;
}
.shopping_list_title_5{
width:70px;
text-align:center;
}
.shopping_list_title_6{
width:70px;
text-align:center;
}
.shopping_product_list{
background-color:#fefbf2;
height:40px;
}
.shopping_product_list input{
width:30px;
height:15px;
border:solid 1px #666;
text-align:center;
}
.shopping_product_list td{
line-height:35px;
border-bottom:dashed 1px #CCC;
}
.shopping_product_list_1{
width:420px;
padding-left:30px;
text-align:left;
}
.shopping_product_list_2{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_3{
width:120px;
text-align:center;
color:#464646;
}
.shopping_product_list_4{
width:120px;
text-align:center;
color:#191919;
}
.shopping_product_list_5{
width:70px;
text-align:center;
}
.shopping_product_list_6{
width:70px;
text-align:center;
}
.shopping_list_end{
background-color:#cddbb8;
height:60px;
}
.shopping_list_end li{
float:right;
}
.shopping_list_end_1{
margin:10px 10px 0px 10px;
}
.shopping_list_end_2{
font-weight:bold;
color:#BD3E00;
font-size:14px;
margin:15px 10px 0px 0px;
}
.shopping_list_end_3{
font-weight:bold;
font-size:14px;
margin:15px 0px 0px 15px;
}
.shopping_list_end_4{
border-right:solid 1px #666666;
margin:10px 0px 0px 15px;
padding-right:10px;
}
.shopping_list_end_yellow{
color:#BD3E00;
}
JS部分
// JavaScript Document
/*根据您挑选的商品,当当为您推荐部分的显示和隐藏*/
function shopping_commend_show(){
var imgid=$("#shopping_commend_arrow"); //图片箭头
var divid=$("#shopping_commend_sort"); //层的id
if(divid.css("display")=="none"){
divid.css("display","block");
imgid.attr("src","images/shopping_arrow_up.gif");
}else{
divid.css("display","none");
imgid.attr("src","images/shopping_arrow_down.gif");
}
}
//删除
function deleteProduct(obj){
var flag=confirm("您确定要删除此商品吗?");
if(flag){
$("#"+obj).remove();
productCount();
}else{
return;
}
}
function deleteProduct(obj){
var flag=confirm("您确定要删除此商品吗?");
if(flag){
$("#"+obj).remove();
productCount();
}else{
return;
}
}
$(function(){
productCount();
});
productCount();
});
//计算商品总额的方法
function productCount(){
var total=0; //总价
var save=0; //节省金额
var integral=0; //积分
var point;//每一行的单品积分
var price;//每一行的市场价
var ddprice;//每一行的当当价
var number;//每一行的数量
var mytable=$("#myTableProduct tr");
for(var i=0;i<mytable.length;i++){//循环每一行
point=$("#myTableProduct tr:eq("+i+") td:eq(1) label:eq(0)").html();
price=$("#myTableProduct tr:eq("+i+") td:eq(2) label:eq(0)").html();
ddprice=$("#myTableProduct tr:eq("+i+") td:eq(3) label:eq(0)").html();
number=$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val();
if(isNaN(number)){
alert("您输入的商品数量格式有误,请重新输入!");
$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").select();
return;
}
total+=ddprice*number;
save+=(price-ddprice)*number;
integral+=point*number;
}
$("#product_total").html(total.toFixed(2));
$("#product_save").html(save.toFixed(2));
$("#product_integral").html(integral.toFixed(2));
}
point=$("#myTableProduct tr:eq("+i+") td:eq(1) label:eq(0)").html();
price=$("#myTableProduct tr:eq("+i+") td:eq(2) label:eq(0)").html();
ddprice=$("#myTableProduct tr:eq("+i+") td:eq(3) label:eq(0)").html();
number=$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val();
if(isNaN(number)){
alert("您输入的商品数量格式有误,请重新输入!");
$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").select();
return;
}
total+=ddprice*number;
save+=(price-ddprice)*number;
integral+=point*number;
}
$("#product_total").html(total.toFixed(2));
$("#product_save").html(save.toFixed(2));
$("#product_integral").html(integral.toFixed(2));
}
var mycount=0;
function buyProduct(obj){
var bookName=$("#"+obj+" li:eq(0)").text().substring(1);
var bookPrice=$("#"+obj+" li:eq(1)").text().substring(1);
var ddPrice=$("#"+obj+" li:eq(2)").text().substring(1);
var flag=true;
var rebate=ddPrice/bookPrice*100;
var mytable1=$("#myTableProduct tr");
for(var i=0;i<mytable1.length;i++){//循环每一行
name=$("#myTableProduct tr:eq("+i+") td:eq(0) a:eq(0)").text();
if(name==bookName){
var sum=$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val();
sum++; //如果存在则数量加1
$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val(sum);
productCount();
return;
}
}
//如果不存在,则在已购商品列表中添加一行
mycount++;
var str="<tr class=\"shopping_product_list\" id=\"addProduct_"+mycount+"\">";
str+="<td class=\"shopping_product_list_1\"><a href=\"#\" class=\"blue\">"+bookName+"</a></td>";
str+="<td class=\"shopping_product_list_2\"><label>100</label></td>";
str+="<td class=\"shopping_product_list_3\">¥<label>"+bookPrice+"</label></td>";
str+="<td class=\"shopping_product_list_4\">¥<label>"+ddPrice+"</label> ("+rebate.toFixed(0)+"折)</td>";
str+="<td class=\"shopping_product_list_5\"><input type=\"text\" value=\"1\" onBlur=\"productCount()\"></td>";
str+="<td class=\"shopping_product_list_6\"><a href=\"javascript:deleteProduct('addProduct_"+mycount+"')\" class=\"blue\">删除</a></td></tr> ";
var bookName=$("#"+obj+" li:eq(0)").text().substring(1);
var bookPrice=$("#"+obj+" li:eq(1)").text().substring(1);
var ddPrice=$("#"+obj+" li:eq(2)").text().substring(1);
var flag=true;
var rebate=ddPrice/bookPrice*100;
var mytable1=$("#myTableProduct tr");
for(var i=0;i<mytable1.length;i++){//循环每一行
name=$("#myTableProduct tr:eq("+i+") td:eq(0) a:eq(0)").text();
if(name==bookName){
var sum=$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val();
sum++; //如果存在则数量加1
$("#myTableProduct tr:eq("+i+") td:eq(4) input:eq(0)").val(sum);
productCount();
return;
}
}
//如果不存在,则在已购商品列表中添加一行
mycount++;
var str="<tr class=\"shopping_product_list\" id=\"addProduct_"+mycount+"\">";
str+="<td class=\"shopping_product_list_1\"><a href=\"#\" class=\"blue\">"+bookName+"</a></td>";
str+="<td class=\"shopping_product_list_2\"><label>100</label></td>";
str+="<td class=\"shopping_product_list_3\">¥<label>"+bookPrice+"</label></td>";
str+="<td class=\"shopping_product_list_4\">¥<label>"+ddPrice+"</label> ("+rebate.toFixed(0)+"折)</td>";
str+="<td class=\"shopping_product_list_5\"><input type=\"text\" value=\"1\" onBlur=\"productCount()\"></td>";
str+="<td class=\"shopping_product_list_6\"><a href=\"javascript:deleteProduct('addProduct_"+mycount+"')\" class=\"blue\">删除</a></td></tr> ";
$("#myTableProduct").prepend(str);
productCount();
}
productCount();
}