加入购物车与购物车加减

最新推荐文章于 2023-05-31 20:52:24 发布
最新推荐文章于 2023-05-31 20:52:24 发布
阅读量2.9k 收藏 8
点赞数 1
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangzunshao/article/details/53040885
版权
(一)加入购物车

html代码部分:
     <section class="cart_fixed"> 
        <section class="cart_left">
          <span><a href="shopping_cart.html" class="cart_icon"><i style="display:none;">0</i></a><section class="sucess_cart" style="display:none;"><p>已成功加入购物车</p><a href="shopping_cart.html">去结算</a><em></em></section></span>
          <!-- <span><a href="" class="service_icon"></a></span> -->
          <span><a href="javascript:void(0);" class="favo_icon"></a></span>
        </section>
        <a href="javascript:void(0);" οnclick="add_car();">加入购物车</a>
    </section>
    <!--/底部-->
    <!--弹窗-->
    <section class="load_cart" style="display:none;"><img src="images/load.gif" width="35" height="35" alt="">加入购物车...</section>
 js代码部分: 
function add_car(){
        $(".load_cart").show();
        $(".cart_left").siblings().remove();
        $(".cart_fixed").append('<a href="javascript:void(0);">加入购物车</a>');
        window.setTimeout(hello,2000);
}
function hello(){ 
        var num = $(".cart_icon i").html();//获取购物车中的商品数量
        var number = parseInt(num) + 1;
        if(number>5){
            $(".load_cart").html("抱歉,库存不足!");
            $(".cart_left").siblings().remove();
            $(".cart_fixed").append('<a href="javascript:void(0);" οnclick="add_car();">加入购物车</a>');
            return false;
 <span style="white-space:pre">	</span>}
        $(".load_cart").hide();
        $(".cart_icon i").html(number);
        $(".cart_icon i,.sucess_cart").show();
        $(".cart_left").siblings().remove();
        $(".cart_fixed").append('<a href="javascript:void(0);" οnclick="add_car();">加入购物车</a>');
        window.setTimeout(guanbi,2000);
}
function guanbi(){
    $(".sucess_cart").hide();
}
$(".load_cart").click(function(){
        $(".load_cart").html('<img src="images/load.gif" width="35" height="35" alt="">加入购物车...');
        $(".load_cart").hide();
});
(二)购物车加减

 
html代码部分: 
<section class="cart_list">
        <ul>
            <li class="goods1">
                <span class="choose"><i></i></span>
                <dl>
                    <dt><a href=""><img src="img/pic.png" alt=""></a></dt>
                    <dd>
                        <a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
                        <p>
                            <a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗？','goods1')"></a>
                            <strong class="price">?<font>16.80</font></strong>
                            <span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
                        </p>
                    </dd>
                </dl>
            </li>
            <li class="goods2">
                <span class="choose"><i></i></span>
                <dl>
                    <dt><a href=""><img src="img/pic.png" alt=""></a></dt>
                    <dd>
                         <a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
                        <p>
                            <a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗？','goods2')"></a>
                            <strong class="price">?<font>120.00</font></strong>
                            <span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
                        </p>
                    </dd>
                </dl>
            </li>
            <li class="goods3">
                <span class="choose"><i></i></span>
                <dl>
                    <dt><a href=""><img src="img/pic.png" alt=""></a></dt>
                    <dd>
                        <a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
                        <p>
                            <a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗？','goods3')"></a>
                            <strong class="price">?<font>18.50</font></strong>
                            <span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
                        </p>
                    </dd>
                </dl>
            </li>
            <li class="goods4">
                <span class="choose"><i></i></span>
                <dl>
                    <dt><a href=""><img src="img/pic.png" alt=""></a></dt>
                    <dd>
                        <a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
                        <p>
                            <a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗？','goods4')"></a>
                            <strong class="price">?<font>198.00</font></strong>
                            <span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
                        </p>
                    </dd>
                </dl>
            </li>
            <li class="goods5">
                <span class="choose"><i></i></span>
                <dl>
                    <dt><a href=""><img src="img/pic.png" alt=""></a></dt>
                    <dd>
                        <a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
                        <p>
                            <a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗？','goods5')"></a>
                            <strong class="price">?<font>18.00</font></strong>
                            <span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
                        </p>
                    </dd>
                </dl>
            </li>
        </ul>
    </section>
    <!--/主体部分-->
    <!--底部-->
    <section class="quanx_fixed">
        <section class="quanx_left">
            <label><i></i>全选</label>
            <span>总计<em id="total">￥37.00</em></span>
        </section>
        <a href="javascript:;" class="setMoney">立即结算(<em>0</em>)</a>
    </section>
    <!--/底部-->
js代码部分: 
$(function(){ 
<span style="white-space:pre">	</span>//数量加法
    <span style="white-space:pre">	</span>$(".add").click(function(){ 
		var t=$(this).siblings('input'); 
		t.val(parseInt(t.val())+1);
		if($(".cart_list ul li .choose").hasClass('cur')){
			totalNum(); //统计总的数量
			totalMoney();//统计总价格
		}
	})
	//数量减法
	$(".min").click(function(){ 
		var t=$(this).siblings('input'); 
		t.val(parseInt(t.val())-1) 
		if(parseInt(t.val())<1){ 
			t.val(1); 
		}
		if($(".cart_list ul li .choose").hasClass('cur')){
			totalNum(); //统计总的数量
			totalMoney();//统计总价格
		}
	}) 
	//判断是否全选
    chkAll();
}) 
//全选按钮
$(".quanx_left label").click(function(){
	$(this).toggleClass('cur');
	if($(".quanx_left label").hasClass('cur')){
		$(".cart_list ul li span").addClass('cur');
		totalNum();//统计数量
		totalMoney();//统计总价格
		$("#total").parent().show();
	}else{
		$(".cart_list ul li span").removeClass('cur');
		var num = $(".cart_list ul li span.cur i").size();
		if(num==0){
			$("#total").parent().hide();
		}else{
			$("#total").parent().show();
		}
		$(".setMoney").empty().html("立即结算(<em>"+num+"</em>)");
		totalMoney();//统计总价格
	}
});
//点击单个商品
$(".cart_list ul li .choose").click(function(){
	if(!$(this).hasClass('cur')){
		$(this).toggleClass('cur');
		chkAll();//全选
		totalNum(); //统计总的数量
		totalMoney();//统计总价格
	}else{
		$(this).toggleClass('cur');
		chkAll();//全选
		totalNum(); //统计总的数量
		totalMoney();//统计总价格
	}
});
//判断是否全选
function chkAll(){
	var _li = $(".cart_list ul li span i").size();
	var _liCur = $(".cart_list ul li span.cur i").size();
	if(_liCur==_li){
		$(".quanx_left label").addClass('cur');
	}else{
		$(".quanx_left label").removeClass('cur');
	}
	if(_liCur==0){
		$("#total").parent().hide();
	}else{
		$("#total").parent().show();
	}
}
//统计商品数量
function totalNum(){
	var num=0;
	$('.cart_list ul li .choose').each(function(){
		if ($(this).hasClass('cur')) {
			var number = parseInt($(this).parent().find('input').val());
			number = isNaN(number) ? 1 : Math.abs(number);
			num += number; 
		};  
	});
	$(".setMoney").empty().html("立即结算(<em>"+num+"</em>)");
}
//统计总价格
function totalMoney(){
	var totalMoney=0;
	$('.cart_list ul li .choose').each(function(){
		if ($(this).hasClass('cur')) {
			var number = parseInt($(this).parent().find('input').val());
			var money =  $(this).parent().find('font').html();
			money = money*number;
			money = isNaN(money) ? 1 : Math.abs(money);
			totalMoney += money;
		};  
	});
	$("#total").empty().html(totalMoney.toFixed(2));
}
//删除指定的单品
function showDialogConfirm(msg,cont){
	var str = '<div class="cengbox"></div><section class="popup"><p>'+msg+'</p><a href="javascript:void(0)" class="cel">取消</a><a href="javascript:void(0)" class="cur ok">确定</a></section>';
	$('body').append(str);
	$('body a.ok').on("click",function(){
		$('body .'+cont+'').detach();
		$(".cengbox,.popup").detach();
		totalNum();
		totalMoney();
		chkAll();
		var num = $(".cart_list ul li span.cur i").size();
		if(num==0){
			$("#total").parent().hide();
			$(".quanx_left label").removeClass();
		}else{
			$("#total").parent().show();
		}
	})
	$('body a.cel').on("click",function(){
		$(".cengbox,.popup").detach();
	})
	return false;
}
//点击立即结算
$(".setMoney").click(function(){
	var num = $(".cart_list ul li span.cur i").size();
	if(num==0){
		msg('请选择您要购买的商品!');
	}else{
		msg('恭喜,购买商品成功!');
	}
});
//弹出提示框
function msg(msg){
	var str = '<div class="cengbox"></div><section class="popup"><p>'+msg+'</p><a href="javascript:void(0)" class="cel">取消</a><a href="javascript:void(0)" class="cur ok">确定</a></section>';
	$('body').append(str);
	$('body a.ok,a.cel').on("click",function(){
	   $(".cengbox,.popup").detach();
	})
	return false;
}
叶少翔
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现购物车商品数量加减
10-14
主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Html购物车
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
jQuery+HTML5加入购物车代码分享
01-21
这是一款基于jquery+html5实现的支持累加计价的网站购物车代码，可以把货物添加到购物车，添加物品数量，如果想取消购置某物品，这个功能也是可以实现的。 运行效果图：———————————–查看效果———————————– 为大家分享的jQuery+HTML5加入购物车代码如下 <head lang=en> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta name=viewport content=width=device-width, initial-sc
加入购物车代码
05-16
加入购物车
jQuery+HTML5加入购物车特效代码
03-20
jQuery+HTML5加入购物车代码是一款基于jquery+html5实现的支持累加计价的网站购物车代码。本作品由【A5源码】收集整理，转载请注明出处！
加入购物车功能实现
热门推荐
gxyouzhizhe的博客
06-21 2万+
表有汇PC端购物车功能实现 加入购物车实际上就是将你选择的商品的ID、颜色、数量新增进购物车表 商品介绍页面： 成功后提示： 加入购物车的表和表的关系 加入购物车用到的表有：商品表（dt_goods）、购物车表（dt_shoppingCar）、用户表（dt_users） 商品表表的字段有：商品id、标题、副标题、商品编号、库存数量、市场价格、销售价格、积
微信小程序：购物车加减
Dove言和
03-19 4098
此贴为自己记录贴，以便日后做到同样的项目能给自己提个醒 在加入购物车时，会将商品编号（goods_id）、数量（quan）等有用的信息存入购物车表（cart），有则在原有的基础上添加数量，无则新增一条数据，从而生成一个cart表的id。打开购物车时，将id、goods_id、quan赋值，如果商品库存或者状态发生变化，也要改要体现出来，例如库存不够、该商品已下架之类的。 购物车的加减和输...
详谈简略式购物车代码
m0_75278009的博客
11-23 995
我所写的这个购物车代码已经有人发布过了 但我学的时候有些地方并不是很理解，我花了一段时间思考后，便来谈谈我对其的理解 首先，我们需要思考购物车是什么 购物车是用来装商品的，而商品有很多，其又有各自的属性，如：价格，数量，名称等。 那么我们就可以把购物车看成一个容器，来装这些商品，由于我目前所学的知识有限，便把他定义为数组，像这样 Goodsmodel[] goodscar=new Goodsmodel[100]
（六）Vue项目——微商城：实现购物车结算信息、商品数量加减
m0_71824048的博客
05-31 2245
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
vue实现九九乘法表 (还没有实现横向输出) 求助一下，知道的告知一下
weixin_34072159的博客
04-21 1231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
HTML5点击添加商品购物车代码源代码
03-15
这个插件使用了HTML5的新特效：storage ，就是游览器数据库的功能，这跟之前把数据存在cookies里面原理是相识的，这样的好处在于用户刷新页面，数据还在，，又不需要跟后端进行数据交互。
购物车代码
04-25
index.html jQuery HTML5添加到购物车代码
小程序加入购物车代码
09-18
一个完整的微信小程序开发demo，绝对打开你的小程序之旅 一个完整的微信小程序开发demo，绝对打开你的小程序之旅
AngularJS购物车商品数量加减计算代码
01-03
AngularJS购物车商品数量加减计算代码 不错的AngularJS例子
购物车完整功能代码
04-04
本代码实现了一套完整的购物车功能，批量选择、批量删除。真正告别了霸王购物车，提供完整的注释，简单易懂
jquery加入购物车数量加减
09-06
jquery加入购物车数量加减完美的实现，一个很好的实例
27 Flutter仿京东商城项目 购物车之 实现数量加减 以及获取加入购物车的数据29分13秒.rar
03-25
27 Flutter仿京东商城项目 购物车之 实现数量加减 以及获取加入购物车的数据29分13秒.rar
购物车小程序
04-18
实现全选、单选功能，数量增加与减少，选中商品数量增加，总数跟着增加，相反，取消商品，总数跟着减少
jquery实现购物车基本功能
12-30
购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作，其实现过程如下所示： 1.html代码： <body> 购物车空空如也，快去选购吧 <input type=checkbox class=checkOnly style=...
javaee菜品加入购物车代码
最新发布
06-12
好的，以下是一个简单的JavaEE菜品加入购物车的代码示例： 1. 菜品对象的定义 ``` public class MenuItem { private String name; private double price; private String image; // 其他属性和方法省略 // 构造方法 public MenuItem(String name, double price, String image) { this.name = name; this.price = price; this.image = image; } // getter和setter方法省略 } ``` 2. 购物车对象的定义 ``` public class ShoppingCart { private List<MenuItem> selectedItems; private double totalPrice; // 其他属性和方法省略 // 构造方法 public ShoppingCart() { selectedItems = new ArrayList<>(); totalPrice = 0; } // 将菜品加入已选菜品列表 public void addItem(MenuItem item) { selectedItems.add(item); totalPrice += item.getPrice(); } // 将菜品从已选菜品列表中移除 public void removeItem(MenuItem item) { selectedItems.remove(item); totalPrice -= item.getPrice(); } // getter和setter方法省略 } ``` 3. 菜品列表页面中的加入购物车操作 ``` <%-- menuItemList.jsp --%> <%@ page import="com.example.MenuItem" %> <%@ page import="com.example.ShoppingCart" %> <% // 创建几个示例菜品对象 MenuItem item1 = new MenuItem("宫保鸡丁", 28.0, "gongbaojiding.jpg"); MenuItem item2 = new MenuItem("鱼香肉丝", 25.0, "yuxiangrousi.jpg"); MenuItem item3 = new MenuItem("红烧肉", 30.0, "hongshaorou.jpg"); // 将菜品对象加入request域中，供页面使用 request.setAttribute("item1", item1); request.setAttribute("item2", item2); request.setAttribute("item3", item3); %> <html> <head> <title>菜品列表</title> </head> <body> <h1>菜品列表</h1> <ul> <li> <%-- 显示菜品1的信息 --%> <img src="<%= item1.getImage() %>"> <%= item1.getName() %> <%= item1.getPrice() %>元 <%-- 加入购物车按钮 --%> <form action="add-to-cart.jsp" method="post"> <input type="hidden" name="itemName" value="<%= item1.getName() %>"> <input type="hidden" name="itemPrice" value="<%= item1.getPrice() %>"> <input type="submit" value="加入购物车"> </form> </li> <%-- 显示菜品2和菜品3的信息，以此类推 --%> </ul> </body> </html> ``` 4. 加入购物车操作的实现 ``` <%-- add-to-cart.jsp --%> <%@ page import="com.example.MenuItem" %> <%@ page import="com.example.ShoppingCart" %> <% // 获取已选菜品列表和总价的session对象 HttpSession session = request.getSession(); ShoppingCart cart = (ShoppingCart) session.getAttribute("cart"); if (cart == null) { // 如果session中没有购物车对象，创建一个新的购物车对象 cart = new ShoppingCart(); session.setAttribute("cart", cart); } // 获取要加入购物车的菜品名称和价格 String itemName = request.getParameter("itemName"); double itemPrice = Double.parseDouble(request.getParameter("itemPrice")); // 创建一个菜品对象，并将其加入购物车 MenuItem item = new MenuItem(itemName, itemPrice, ""); cart.addItem(item); // 跳转回菜品列表页面 response.sendRedirect("menuItemList.jsp"); %> ``` 以上代码示例仅供参考，具体实现方法可能因应用场景而异。希望这个回答能够帮助到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值