仿淘宝购物车模块，关键练习js

最新推荐文章于 2024-01-01 11:30:00 发布
最新推荐文章于 2024-01-01 11:30:00 发布
阅读量203 收藏 2
点赞数
分类专栏： JavaScript 文章标签： jquery html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_I_M_I_l_u_c_k/article/details/120610366
版权

html代码部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="jQuery.min.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <div class="cart-filter-bar">
        <em>全部商品</em>
    </div>
    <!-- 购物车主要核心区域 -->
    <div class="cart-wrap">
        <!-- 头部全选模块 -->
        <div class="cart-thread">
            <div class="t-checkbox">
                <input type="checkbox" class="checkall"> 全选
            </div>
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
        </div>
        <!-- 商品详细模块 -->
        <div class="cart-item-list">
            <div class="cart-item check-cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name=" " class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="img.png" alt="">
                    </div>
                    <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                </div>
                <div class="p-price">￥22.50</div>
                <div class="p-num">
                    <div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div>
                </div>
                <div class="p-sum">￥22.50</div>
                <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item check-cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name=" " class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="img.png" alt="">
                    </div>
                    <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                </div>
                <div class="p-price">￥29.80</div>
                <div class="p-num">
                    <div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div>
                </div>
                <div class="p-sum">￥29.80</div>
                <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item check-cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name=" " class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="img.png" alt="">
                    </div>
                    <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                </div>
                <div class="p-price">￥19.80</div>
                <div class="p-num">
                    <div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div>
                </div>
                <div class="p-sum">￥19.80</div>
                <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item check-cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name=" " class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="img.png" alt="">
                    </div>
                    <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                </div>
                <div class="p-price">￥32.40</div>
                <div class="p-num">
                    <div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div>
                </div>
                <div class="p-sum">￥32.40</div>
                <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <!-- 结算模块 -->
            <div class="cart-floatbar">
                <div class="select-all">
                    <input type="checkbox" class="checkall">全选
                </div>
                <div class="operation">
                    <a href="javascript:;" class="remove-batch">删除选中的商品</a>
                    <a href="javascript:;" class="clear-all">清理购物车</a>
                </div>
                <div class="toolbar-right">
                    <div class="amout-sum">已选<em> 1 </em>件商品</div>
                    <div class="price-sum">总价: <em>￥12.60</em></div>
                    <div class="btn-area">去结算</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css代码部分

.cart-wrap {
    width: 1225px;
}

.cart-filter-bar {
    font-weight: 500;
    color: #ff0000;
    font-size: 20px;
    width: 80px;
    height: 40px;
    line-height: 50px;
    border-bottom: 1px solid #ff0000;
    text-align: center;
}

em {
    font-style: normal;
}

.cart-thread {
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
    text-align: center;
}

.cart-thread div {
    float: left;
}

.t-checkbox {
    width: 130px;
    text-align: left;
    padding-left: 20px;
}

.t-goods {
    width: 400px;
    text-align: left;
}

.t-price {
    width: 150px;
}

.t-num {
    width: 150px;
}

.t-sum {
    width: 150px;
}

.t-action {
    width: 150px;
}

.cart-item-list {
    width: 1230px;
    background-color: rgb(255, 212, 212);
}

.cart-item-list div {
    float: left;
}

.cart-item {
    width: 1200px;
    padding-left: 20px;
    height: 150px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

.p-checkbox {
    padding-top: 20px;
    width: 50px;
    height: 100px;
}

.p-goods {
    float: left;
    width: 480px;
    height: 150px;
    padding-top: 20px;
}

.p-goods .p-img img {
    width: 100px;
    height: 100px;
}

.p-msg {
    float: left;
    font-size: 12px;
    width: 200px;
    margin-left: 20px;
}

.p-price {
    padding-top: 20px;
    width: 150px;
    text-align: center;
}

.p-num {
    padding-top: 20px;
    width: 152px;
    text-align: center;
}

.p-num a {
    text-decoration: none;
    color: #000;
}

.quantity-form {
    width: 100px;
    margin-left: 24px;
    /* height: 25px; */
    border: 1px solid #000;
    text-align: center;
}

.quantity-form input {
    width: 50px;
    text-align: center;
    border: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.quantity-form a {
    width: 22px;
    display: inline-block;
    text-align: center;
    color: #000;
    background-color: #fff;
}

.p-sum {
    padding-top: 20px;
    width: 150px;
    text-align: center;
}

.p-action {
    padding-top: 20px;
    width: 150px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #000;
}

.cart-floatbar {
    width: 1220px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000;
}

.select-all {
    width: 100px;
    padding-left: 20px;
}

.operation {
    width: 800px;
    font-size: 12px;
}

.operation a {
    display: inline-block;
    width: 100px;
    text-align: center;
}

.toolbar-right {
    width: 300px;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
}

.amout-sum {
    width: 100px;
}

.amout-sum em {
    color: #dd0000;
    font-weight: 600;
    font-size: 16px;
}

.price-sum {
    width: 120px;
}

.price-sum em {
    color: #dd0000;
    font-weight: 600;
    font-size: 16px;
}

.btn-area {
    width: 80px;
    height: 50px;
    font-size: 16px;
    line-height: 45px;
    color: #fff;
    font-weight: 700;
    background-color: #dd0000;
    text-align: center;
}

.checkbox-item-checked {
    background-color: rgb(255, 218, 218);
}

js代码部分

$(function() {
    // 1.全选全不选模块
    $(".checkall").change(function() {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            $(".cart-item").addClass("checkbox-item-checked");
        } else {
            $(".cart-item").removeClass("checkbox-item-checked");
        }
        getsum();
    });

    // 2.如果有一个复选框全被选中，则全选
    $(".j-checkbox").change(function() {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("checkbox-item-checked");
        } else {
            $(this).parents(".cart-item").removeClass("checkbox-item-checked");
        }
        getsum();
    });

    // 3. (1) 点击增加商品数量，总价随之增加
    $(".increment").click(function() {
        // 获取当前商品数量
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
        // 获取当前商品单价p
        var p = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // 添加商品总价
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        // console.log(p);
        getsum();
    });
    // 3. (2) 点击减少商品数量，总价随之减少
    $(".decrement").click(function() {
        // 获取当前商品数量
        var n = $(this).siblings(".itxt").val();
        if (n <= 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 获取当前商品单价p
        var p = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // 添加商品总价
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        // console.log(p);
        getsum();
    });
    getsum();
    // 4. 计算商品总数量以及总价钱
    function getsum() {
        var count = 0;
        var money = 0;
        // 想加个限制条件，如果小复选框选中，才计算总数值
        // if ($(".j-checkbox").prop("checked")) {
        $(".itxt").each(function(i, ele) {
            if ($(".itxt").eq(i).parents(".p-num").siblings(".p-checkbox").children(".j-checkbox").prop("checked")) {
                count += parseInt($(ele).val());
            }
        })
        $(".amout-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            if ($(".p-sum").eq(i).siblings(".p-checkbox").children(".j-checkbox").prop("checked")) {
                money += parseFloat($(ele).text().substr(1));
            }
        })
        $(".price-sum em").html("￥" + money.toFixed(2));
    };
    // 删除商品操作
    // 1. 单独删除每个商品
    $(".p-action").click(function() {
        $(this).parent(".cart-item").remove();
        getsum();
    });
    // 2. 点击下面删除选中的商品
    $(".remove-batch").click(function() {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getsum();
    });
    // 3. 清理购物车 把购物车中的所有商品移除
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getsum();
    });
})

说明：在pink老师教学的基础上，增加了对小复选框的判断，只有被选中的小复选框才会被计算数量及总价。

麸or莘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简要模仿淘宝购物车功能
weixin_34336526的博客
03-28 250
一主要功能： 实现通过点击、拖动添加购物车，购物金额自动结算，以及删减物品的功能。 有待改进之处：还未实现在购物车内实现+1，-1功能。 二、效果图 三、相关代码 1,HTML+JS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模仿...
原生js做的一个单页面简易购物车
kar98km416的博客
06-23 2500
介绍： 1.动态生成商品列表。这里遍历商品数据数组，生成tr和td并给td赋值从而完成表格的创建。对比vue+elementUI，使用v-for和el-table组件可以轻松完成表格的绘制。 2.加入购物车。点击按钮后把该商品的信息通过localStorage传给购物车，接着再调用生成方法把表格画出来。 3.购物车操作。删除：很简单了，注意对shopGoods的删除操作要放在tr.remove()之前，否则拿到的rowIndex为-1，加减件数：件数为1时再减则执行删除操作。 4.序号还是比较坑的.
js+css简单购物车页面模板
热门推荐
大橙子_Change的博客
04-08 1万+
效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="gg.js"></script> <s...
Vue仿淘宝购物车 (以下仅供参考)
weixin_47036542的博客
05-24 271
html <section class="car_main"> <!--顶部列表--> <div class="car_head"> <ul class="car_top"> <li class="car_check_all"> <input style="width: 20px;height: 20px;" type="checkbox" id="check
JS特效第59弹：仿淘宝购物车
最新发布
weixin_38343072的博客
01-01 482
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
原生js仿淘宝购物车页面.zip
07-11
实现效果： 原生js仿淘宝购物车页面，通过原生js实现淘宝购物车的效果，点击加减，数量的变化以及总价的变化，非常适合一些电商网站或者大型商城，php中文网推荐下载！
cart.zip_houseyze_仿淘宝购物车
09-15
【标签】"houseyze"可能是指该项目的特定命名或者开发团队，而"仿淘宝购物车"标签则明确了项目的目标，即创建一个与淘宝购物车类似的功能模块。这表明开发者可能参考了淘宝购物车的设计理念和用户体验，以提供一个...
vue实现的仿淘宝购物车功能详解
10-17
在本教程中，我们将深入探讨如何使用Vue.js框架来实现一个仿淘宝购物车的功能。Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的语法和强大的数据绑定能力深受开发者喜爱。通过Vue，我们可以轻松地构建动态且...
仿淘宝购物车功能模块案例.zip
12-30
在本案例中，"仿淘宝购物车功能模块"是一个典型的前端开发项目，主要涉及JavaScript和HTML技术。这个项目旨在模拟淘宝网的购物车系统，帮助学习者理解和实践电商平台中的购物车逻辑。以下是对这个功能模块的详细分析...
js仿淘宝，天猫抛入购物车效果
08-28
总结来说，实现“js仿淘宝，天猫抛入购物车效果”主要涉及以下步骤： 1. 设置HTML结构，包括商品元素和购物车元素。 2. 引入jQuery和jQuery.fly插件。 3. 编写JavaScript代码，监听商品元素的点击事件。 4. 使用...
仿淘宝购物车，多层订单
02-05
一个简单的多层购物车结构demo，主要使用了BaseRecyclerViewAdapterHelper和RecycleView，简单易懂，代码量少
模仿移动端淘宝购物车
cxcxrs的博客
01-15 2393
一、前言 最近仿照淘宝手机端购物车的样式和功能，写了个购物车出来~ 虽然可能还没淘宝的样式好看， 但写完之后还是很有成就感的。 以下是购物车样式： 二、代码实现 1. ShoppingCart.js $(function(){ // 删除操作(从界面和localStorage中删除) mui(".mui-table-view-cell").on("tap",".mui-btn",fun...
vue仿淘宝购物车的实现
xwaxy_的博客
11-12 1797
先看效果图 实现的功能有： 1、选中店铺，店铺下的商品全选中 2、店铺下的商品全选中，相对应的店铺也会被选中 3、所有的店铺全选中，底部的全选也会被选中 4、所有的商品全选中，底部的全选也会被选中 5、底部的全选选中，所有的店铺和商品都会被选中 6、价格会根据相应的选中计算 代码如下 html部分： <!-- 商品列表 --> <div class="cartlist"> <div class="cart-item" v-.
JavaScript 仿淘宝购物车案例
weixin_45567213的博客
12-31 1284
一个很懒的博主：css样式不多将就看一下
[vue]仿淘宝app购物车实现
qq_42709302的博客
01-07 968
根据需求要类似淘宝app的购物车实现。网上的例子一般都是一个产品列表就完成，但淘宝这些需要有一个对店铺的分类，所以复杂度提升一倍。 1.对单个商品数量进行操作的时候，商品的价格变动，总价变动 2.点击产品选择，总价和数量变动，并且一个商店所以产品被选择时，商店的按钮为被选择状态 3.对一个商店做选择的时候，下面所有商品被选择，总价和数量变动，并且所有商店被选择的时，全选为被选择状态 4.全选的时候，所有店铺已经商品为被选择状态，总价和数量变动 作者：Re_Vive 链接：https://www.jian
购物车功能
李泽言的博客
10-10 152
购物车功能 HTML <!-- 商品详细模块 --> <div class="cart-item-list"> <div class="cart-item check-cart-item"> <div class="p-checkbox"> <input type="chec
仿淘宝购物车，js选择效果
wanjian119的博客
11-18 5018
仿淘宝购物车，js选择效果先上界面图 跨境商品中不同的仓库，对应淘宝店中不同的店家。 其实功能不复杂，关键是checkbox的单选，多选，全选，不同状态ajax返回值的处理，还包括后台的处理代码块购物车html<!-- 宁波保税仓 --> {if $goods_nb == 1} <section class="procity"> <div class="protitle"><input
android仿淘宝购物车全选单选编辑动态改变价格
红豆爱丸子的博客
07-21 2035
android仿淘宝购物车 先看gif效果图，以免看了半天不是想要的效果 看到这还没走的应该就是想要的效果吧，下面具体分析 等不及的可以拖到底部的下载地址 先看看布局文件，布局文件很简单，注意我这边用了design库的控件，需要引入design包 主布局:activity_main.xml "http://schemas.android.com/apk/res/android"
Android仿淘宝购物车
lxfeng1098751554的专栏
12-17 981
最近项目需要实现类似淘宝购物车的功能，仿了一个,直接上代码：public class MainActivity extends Activity implements OnCartListener, View.OnClickListener { private static final boolean DEBUG = true; private static final String
android 仿淘宝购物车
06-07
您好！关于Android仿淘宝购物车，可以参考以下步骤： 1. 利用RecyclerView展示购物车列表，可以考虑使用Adapter模式设计购物车列表的数据源。 2. 在购物车列表中，每个商品条目需要展示商品图片、商品名称、商品价格、商品数量、删除按钮等信息。 3. 为了保持购物车中商品数量的同步，可以考虑使用SharedPreferences或SQLite等本地存储方式来保存购物车数据。 4. 点击商品条目的删除按钮，可以删除该商品，并且更新购物车列表和本地存储的购物车数据。 5. 对于商品数量的修改，可以考虑使用加减号或者输入框的方式来实现，同时也需要同步更新购物车列表和本地存储的购物车数据。 6. 在购物车列表界面，需要展示购物车中所有商品的总价，可以在列表底部加一个汇总的布局，实时计算总价。 希望这些步骤可以帮到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值