基于HTML5之APP购物车实现

###一 摘要
今天给大家介绍一下基于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效果
这里写图片描述
###八 结束
代码稍后会上传到github上,大家感兴趣的自己下载.

下面是一个基于 Vue 2 实现简单购物车的示例代码: HTML: ``` <div id="app"> <h2>商品列表</h2> <ul> <li v-for="item in goods" :key="item.id"> {{ item.name }} - {{ item.price }}元 <button @click="addToCart(item)">加入购物车</button> </li> </ul> <h2>购物车</h2> <table> <thead> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in cart" :key="item.id"> <td>{{ item.name }}</td> <td>{{ item.price }}元</td> <td> <button @click="minusFromCart(index)" :disabled="item.quantity === 1">-</button> {{ item.quantity }} <button @click="addToCart(item)">+</button> </td> <td>{{ item.price * item.quantity }}元</td> <td> <button @click="removeFromCart(index)">删除</button> </td> </tr> </tbody> </table> <p>总价:{{ totalPrice }}元</p> </div> ``` JavaScript: ``` new Vue({ el: '#app', data: { goods: [ { id: 1, name: '商品1', price: 10 }, { id: 2, name: '商品2', price: 20 }, { id: 3, name: '商品3', price: 30 } ], cart: [] }, methods: { addToCart(item) { let index = this.cart.findIndex(cartItem => cartItem.id === item.id) if (index !== -1) { this.cart[index].quantity++ } else { this.cart.push({ id: item.id, name: item.name, price: item.price, quantity: 1 }) } }, minusFromCart(index) { if (this.cart[index].quantity > 1) { this.cart[index].quantity-- } }, removeFromCart(index) { this.cart.splice(index, 1) } }, computed: { totalPrice() { return this.cart.reduce((total, item) => total + item.price * item.quantity, 0) } } }) ``` 在这个示例中,首先定义了一个商品列表和一个购物车列表,其中商品列表包含了每个商品的名称、价格和 ID,购物车列表为空。在页面上展示商品列表时,为每个商品添加了一个加入购物车的按钮,并在点击按钮时调用 `addToCart` 方法将对应商品信息加入购物车列表中。在页面上展示购物车列表时,使用了一个表格来展示每个商品的名称、价格、数量和小计金额,并为每个商品添加了加减和删除按钮,同时使用了一个计算属性来计算购物车中所有商品的总价。在 `addToCart` 方法中还实现了判断购物车中是否已存在该商品的逻辑,如果存在则将对应商品的数量加 1,否则将该商品添加到购物车列表中。在 `minusFromCart` 方法中实现了减少购物车中商品数量的逻辑,并且如果商品数量已经为 1,则减少按钮会被禁用。在 `removeFromCart` 方法中通过 `splice` 方法实现了删除购物车列表中的商品的逻辑。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

图解AI

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值