购物车Jquery的实现

最新推荐文章于 2021-02-25 14:49:38 发布

晨枫navy

最新推荐文章于 2021-02-25 14:49:38 发布

阅读量2.9k

点赞数

分类专栏： Web前端文章标签： Javascript jquery html html5

本文链接：https://blog.csdn.net/qfxsxhfy/article/details/44802537

版权

Web前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果图

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">

     <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>

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");
}
}

//删除
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();
}