简易商品购物车
<html><head>
<title>商品购物车</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0;
padding:0;
}
a{
color:#333;
text-decoration: none;
}
a:hover{
color:#333;
text-decoration:underline;
}
img{
border:0;
vertical-align: middle;
}
.blue{
color:#1965b3;
text-decoration:none;
}
.blue:hover{
color:#1965b3;
text-decoration:underline;
}
#header,#main,#footer{
width:960px;
margin:0 auto;
clear:both;
float:none;
margin-bottom: 30px;
}
/*购物车页面样式开始*/
.shopping_commend{
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{
margin-top: 20px;
padding:5px 20px 5px 20px;
height:120px;
}
.shopping_commend_sort_left{
float:left;
width:450px;
}
.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 0;
}
.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 #666;
margin:10px 0px 0px 15px;
padding-right:10px;
}
.shopping_list_end_yellow{
color:#bd3e00;
}
</style>
</head>
<body>
<!--中间部分开始-->
<div id="main">
<!--为您推荐商品开始-->
<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_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">
<tbody>
<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>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct">
<tbody>
<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" onblur="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>
</tbody>
</table>
<div class="shopping_list_end">
<ul>
<li class="shopping_list_end_1"><input name="" type="image" ></li>
<li class="shopping_list_end_2">￥<label id="product_total">626.90</label></li>
<li class="shopping_list_end_3">商品金额总计：</li>
<li class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow" id="product_save">233.70</label><br>
可获商品积分：<label class="shopping_list_end_yellow" id="product_integral">1750.00</label>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="https://qunarzz.com/jquery/prd/jquery-1.7.2.js"></script>
<script type="text/javascript">
function shopping_commend_show(){
var imgid=$("#shopping_commend_arrow"); //图片箭头
var divid=$("#shopping_commend_sort"); //层的id
if(divid.css("display")=="none"){
divid.css("display","block");
}else{
divid.css("display","none");
}
}
//删除
function deleteProduct(obj){
var flag=confirm("您确定要删除此商品吗？");
if(flag){
$("#"+obj).remove();
productCount();
}else{
return;
}
}
$(function(){
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));
}
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> ";
$("#myTableProduct").prepend(str);
productCount();
}
</script>
</body>
</html>
