加入购物车与购物车加减

最新推荐文章于 2021-07-15 14:15:17 发布
最新推荐文章于 2021-07-15 14:15:17 发布
阅读量3k 收藏 8
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jiangzunshao/article/details/53040885
本文介绍了一个简单的购物车功能实现方案，包括商品加入购物车及购物车内商品数量的增减操作。通过HTML、CSS和JavaScript实现了商品加入购物车后的提示效果，并在购物车页面实现了商品数量的增加与减少功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

(一)加入购物车

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);" onclick="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);" onclick="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);" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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;
}
微信小程序：购物车加减
Dove言和
03-19 4436
此贴为自己记录贴，以便日后做到同样的项目能给自己提个醒 在加入购物车时，会将商品编号（goods_id）、数量（quan）等有用的信息存入购物车表（cart），有则在原有的基础上添加数量，无则新增一条数据，从而生成一个cart表的id。打开购物车时，将id、goods_id、quan赋值，如果商品库存或者状态发生变化，也要改要体现出来，例如库存不够、该商品已下架之类的。 购物车的加减和输...
购物车加减操作
KXJ
04-26 331
<!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-UA-Compatible" content="ie=edge"> <title>Document&.
实现购物车的加减算法
07-19 192
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="zaoca...
简单购物车可加减
lishuaileibo的博客
12-21 390
{{x.name}}                         {{x.count}}                         {{x.price}}         删除                         全选    合计0 var app=angular.module("myapp",[
购物车加减
qq_42191634的博客
11-17 145
viewHodel.btn_jia.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int num = list.get(i).getNum(); nu...
27 Flutter仿京东商城项目 购物车之 实现数量加减 以及获取加入购物车的数据29分13秒.rar
03-25
在本项目中，我们主要探讨的是如何使用Flutter框架来构建一个仿京东商城的购物车功能，特别是关于商品数量的加减以及如何获取并处理加入购物车的数据。Flutter是一款由Google开发的开源UI工具包，它允许开发者快速地...
jquery加入购物车数量加减
09-06
在电子商务网站中，"加入购物车"功能是用户体验的核心部分之一。`jQuery`是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务，因此在实现购物车数量加减功能时，`jQuery`是一...
android 购物车数量加减,自定义View 购物车加减数量
weixin_42139042的博客
05-25 932
首先我们需要的是 加(botton) 减(botton) 输入数量(editText) 【这里我还设置了最大值】然后对 加减按钮设置监听，点击对editText的内容进行修改。 布局代码：android:layout_width="wrap_content"android:layout_height="wrap_content"android:ori...
jQUery购物车加减计价与全选全不选
11-02
在这个"jQuery购物车加减计价与全选全不选"的主题中，我们将探讨如何利用jQuery来实现购物车的基本操作。 1. **商品添加与删除**： - 添加：当用户点击“加入购物车”按钮时，可以通过jQuery获取商品ID和数量，...
SpringBoot-项目4-购物车(添加入购物车，购物车列表，购物车商品数量加减操作)
热门推荐
zhangxuelong461的博客
03-02 2万+
64. 购物车-创建数据表 # 注意：没有添加相应的not null约束 CREATE TABLE t_cart ( cid INT AUTO_INCREMENT COMMENT '购物车数据id', uid INT COMMENT '用户id', pid INT COMMENT '商品id', num INT COMMENT '商品数量', price BIGINT(20) ...
购物车数量加减，并统计选中数量和选中总价
08-11
购物车，listview列表，点击+ - 号 增加减少数量，计算单个条目总价，点击checkbox选中，并统计选中数量，统计选中所有商品的总价。
js实现购物车商品数量加减
10-14
主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS购物车商品数量加减计算代码
01-03
AngularJS购物车商品数量加减计算代码 不错的AngularJS例子
购物车实现加减
leehbhs的博客
07-10 912
xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match
京东购物车页面
GGGalaxie的博客
01-15 1151
//导入的依赖 compile 'com.squareup.okhttp3:okhttp:3.6.0' compile 'com.squareup.okio:okio:1.11.0' //gson compile 'com.google.code.gson:gson:2.8.2' //glide compile 'com.github.bumptech.glide:glide:3.7.0'
vue实现九九乘法表 (还没有实现横向输出) 求助一下，知道的告知一下
weixin_34072159的博客
04-21 1299
<!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...
购物车简单加减js
Hgh_1997的博客
08-30 602
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
vue 实现购物车数量加减
鲸鱼饱饱
07-15 2500
vue 实现数量加减 HTML <div class="shoplist" v-for="(item,index) in list" :key="index"> <div>{{item.name}}</div> <div class="redAdd shoplist"> <button @click="red(index)">-</button> <div>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值