HTML5个人购物车页面 基于html5的购物车

###一 摘要
今天给大家介绍一下基于HTML5 之APP购物车的具体实现,代码较多,这里只能罗列一些比较关键的代码.
首先引用别人对购物车流程的形象和购物车实现关键的解释,下面我们来看看具体的解释.

###二 购物车流程
购物车相当于现实中超市的购物车，不同的是一个是实体车，一个是虚拟车而已。用户可以在购物网站的不同页面之间跳转，以选购自己喜爱的商品，点击购买时，该商品就自动保存到你的购物车中，重复选购后，最后将选中的所有商品放在购物车中统一到付款台结账，这也是尽量让客户体验到现实生活中购物的感觉。服务器通过追踪每个用户的行动，以保证在结账时每件商品都物有其主。

1.把商品添加到购物车，即订购
2.删除购物车中已定购的商品
3.修改购物车中某一本图书的订购数量
4.清空购物车
5.显示购物车中商品清单及数量、价格

###三 购物车实现关键
实现购物车的关键在于服务器识别每一个用户并维持与他们的联系。但是HTTP协议是一种“无状态(Stateless)”的协议，因而服务器不能记住是谁在购买商品，当把商品加入购物车时，服务器也不知道购物车里原先有些什么，使得用户在不同页面间跳转时购物车无法“随身携带”，这都给购物车的实现造成了一定的困难。

###四 购物车效果图

###五 关键HTML代码实现

<div class="nav-lf">
<ul id="nav">
  <li class="current"><a href="#st1">水果类</a><b></b></li>
  <li><a href="#st2">衣服类</a><b>1</b></li>
  <li><a href="#st3">蔬菜类</a><b>3</b></li>
  <li><a href="#st4">烟酒类</a><b>6</b></li>
</ul>
</div>

<div id="container" class="container"> 
  <div class="section" id="st1">
  	 <div style="width: 100%;height: 20px;color: red;font-size: 20px;">水果类</div>
  	<div class="prt-lt">
    	<div class="lt-lt"><img src="../images/index/prt_1.jpg"></div>
        <div class="lt-ct">
            <p class="pr">¥<span class="price">60.00</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>
    </div>
    
  	<div class="prt-lt">
    	<div class="lt-lt"><img src="../images/index/prt_2.jpg"></div>
        <div class="lt-ct">
            <p class="pr">¥<span class="price">60.00</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>
    </div>

  	<div class="prt-lt">
    	<div class="lt-lt"><img src="../images/index/prt_3.jpg"></div>
        <div class="lt-ct">
            <p class="pr">¥<span class="price">60.00</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>
    </div>
    ............................

###六 关键js代码实现

var mySwiper = new Swiper('.swiper-container',{
loop : true,
autoplay : 5000,
})
setInterval("mySwiper.slidePrev()", 2000);
$(function(){
	$('#nav').onePageNav();
});

</script>
<script> 
$(function(){ 

$(".add").click(function(){
var t=$(this).parent().find('input[class*=result]'); 
t.val(parseInt(t.val())+1);
setTotal(); 
})
 
$(".minus").click(function(){ 
var t=$(this).parent().find('input[class*=result]'); 
t.val(parseInt(t.val())-1);
if(parseInt(t.val())<0){ 
t.val(0); 
} 
setTotal(); 


})
 
function setTotal(){ 
var s=0;
var v=0;
var n=0;
<!--计算总额--> 
$(".lt-rt").each(function(){ 
s+=parseInt($(this).find('input[class*=result]').val())*parseFloat($(this).siblings().find('span[class*=price]').text()); 

});

<!--计算菜种-->
var nIn = $("li.current a").attr("href");
$(nIn+" input[type='text']").each(function() {
	if($(this).val()!=0){
		n++;
	}
});

<!--计算总份数-->
$("input[type='text']").each(function(){
	v += parseInt($(this).val());
});
if(n>0){
	$(".current b").html(n).show();		
	}else{
	$(".current b").hide();		
		}	
$(".share").html(v);
$("#total").html(s.toFixed(2)); 
} 
setTotal(); 

})

###七 整个app效果

###八 结束