jQuery实现购物车完整功能，script+css完整代码+详细解释，可复制粘贴使用，更改图片及相关数据即可

最新推荐文章于 2024-04-19 10:15:13 发布
最新推荐文章于 2024-04-19 10:15:13 发布
阅读量1k 收藏 11
点赞数 2
文章标签： jquery css 前端 javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bsf000000___/article/details/132591413
版权

jQuery实现购物车完整功能，script+css完整代码+详细解释，可复制粘贴使用，更改图片及相关数据即可

这是一个使用 jQuery 实现的一个购物车功能的 JavaScript 脚本。

  1. 在文档加载完成后，通过 $() 函数获取页面元素并绑定事件处理函数。
  2. 当全选复选框 .checkAll 的状态改变时，将所有商品项的复选框状态设置为与全选复选框相同，并根据全选复选框的状态修改整个购物车的背景样式。
  3. 当商品项的复选框 .checkItem 状态改变时，根据选中的商品项数量修改全选复选框的状态，并修改对应商品项的背景样式。
  4. 点击增加按钮 .add 时，将该商品的购买数量加一，并根据新的购买数量计算并更新该商品的总金额，并调用 getSum() 函数计算整个购物车的总金额。
  5. 点击减少按钮 .substract 时，将该商品的购买数量减一（如果数量已经为1，则不执行操作），并根据新的购买数量计算并更新该商品的总金额，并调用 getSum() 函数计算整个购物车的总金额。
  6. 当手动输入购买数量时，将输入的值向上取整，并根据新的购买数量计算并更新该商品的总金额，并调用 getSum() 函数计算整个购物车的总金额。
  7. getSum() 函数用于计算购物车的总件数和总金额。它遍历所有商品项的购买数量，并将数量累加到 count 中，然后遍历所有商品项的总金额，并将金额累加到 money 中，最后更新页面上显示总件数和总金额的元素。
  8. 点击删除按钮 .del 时，移除该商品项，并调用 getSum() 函数计算整个购物车的总金额。
  9. 点击删除选中商品按钮 .del_choice 时，移除所有选中的商品项，并调用 getSum() 函数计算整个购物车的总金额。
  10. 点击清空购物车按钮 .delAll 时，移除所有商品项，并调用 getSum() 函数计算整个购物车的总金额。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JSFile/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bg{
            background-color: aqua;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .commodity {
            width: 1400px;
            margin-top: 50px;
        }

        .commodity .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: lightgray;
            height: 50px;
        }

        .commodity .head>div {
            display: flex;
        }

        .commodity .head .right {
            width: 700px;
            text-align: center;
        }

        .commodity .head .left>div,
        .commodity .head .right>div {
            flex: 1;
        }

        .commodity .head .left {
            width: 300px;
            margin-left: 10px;

        }

        .commodity img {
            width: 150px;
            display: block;
            padding: 10px;
            border: 1px solid lightgray;
            border-radius: 5px;

        }

        .commodity .main {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-top: 20px;
            /* background-color: aqua; */
            height: 250px;
            margin-top: 20px;
            border-top: 4px solid #666666;
        }

        .commodity .main .left {
            display: flex;
            align-items: start;
            width: 550px;
            justify-content: space-between;
        }

        .commodity .main .left>div {
            margin-left: 10px;
        }

        .commodity .main .left .product {
            display: flex;
            margin-left: 50px;
        }

        .commodity .main .product p {
            margin-left: 20px;
        }

        .commodity .main .right {
            display: flex;
            width: 700px;
        }

        .commodity .main .right>div {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .commodity .main .right .count {
            display: flex;
            height: 30px;
            font-size: 16px;
            margin-top: -5px;
        }

        .commodity .main .right button {
            width: 20px;
            border: none;
            border: 1px solid black;
            background-color: white;
            cursor: pointer;
            font-size: 16px;
        }

        .commodity .main .right input {
            width: 60px;
            text-align: center;
            outline: none;
            border: none;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
        .commodity .main .right .del,
        .commodity .foot .left .del_choice,
        .commodity .foot .left .delAll
        {
            cursor: pointer;
        }
        .commodity .foot {
            font-size: 14px;
            background-color: #b0abab;
            margin-top: 10px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .commodity .foot span {
            color: red;
        }

        .commodity .foot button {
            background-color: red;
            color: white;
            border: none;
            border: 1px solid red;
            height: 40px;
            width: 60px;
            font-weight: bold;
        }

        .commodity .foot>div {
            display: flex;
        }

        .commodity .foot .left {
            margin-left: 10px;
        }

        .commodity .foot .right {
            align-items: center;
        }

        .commodity .foot .right>div,
        .commodity .foot .left>div {
            margin-right: 20px;
        }

        .end {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="commodity">
        <div class="head">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkAll">全选
                </div>
                <div>商品</div>
            </div>
            <div class="right">
                <div>单价</div>
                <div>数量</div>
                <div>小计</div>
                <div>操作</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkItem">
                </div>
                <div class="product">
                    <img src="../images/jd_2.webp" alt="">
                    <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
                </div>
            </div>
            <div class="right">
                <div class="price">￥12.60</div>
                <div class="count">
                    <button class="substract">-</button>
                    <input type="text" class="num" value="1"></input>
                    <button class="add">+</button>
                </div>
                <div class="sum">￥12.60</div>
                <div class="del">删除</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkItem">
                </div>
                <div class="product">
                    <img src="../images/jd_3.webp" alt="">
                    <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
                </div>
            </div>
            <div class="right">
                <div class="price">￥25.60</div>
                <div class="count">
                    <button class="substract">-</button>
                    <input type="text" class="num" value="1"></input>
                    <button class="add">+</button>
                </div>
                <div class="sum">￥25.60</div>
                <div class="del">删除</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkItem">
                </div>
                <div class="product">
                    <img src="../images/jd_4.webp" alt="">
                    <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
                </div>
            </div>
            <div class="right">
                <div class="price">￥18.60</div>
                <div class="count">
                    <button class="substract">-</button>
                    <input type="text" class="num" value="1"></input>
                    <button class="add">+</button>
                </div>
                <div class="sum">￥18.60</div>
                <div class="del">删除</div>
            </div>
        </div>
        <div class="foot">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkAll">全选
                </div>
                <div class="del_choice">删除选中的商品</div>
                <div class="delAll">清空购物车</div>
            </div>
            <div class="right">
                <div>已经选<span class="sumNum">1</span>件商品</div>
                <div>总价：<span class="sumP">￥12.60</span></div>
                <button class="result">去结算</button>
            </div>
        </div>
        <div class="end"></div>
    </div>
    <script>
        $(function(){
            $('.checkAll').change(function(){
                var changeChecked=$(this).prop('checked')
                $('.checkItem,.checkAll').prop('checked',changeChecked)
                if($(this).prop('checked')){
                    $('.main').addClass('bg')
                }else{
                    $('.main').removeClass('bg')
                }
            })
            $('.checkItem').change(function(){
                if($(this).prop('checked')){
                    $(this).parents('.main').addClass('bg')
                }else{
                    $(this).parents('.main').removeClass('bg')
                }
                if($('.checkItem:checked').length==3){
                    $('.checkAll').prop('checked',true)
                }else{
                    $('.checkAll').prop('checked',false)
                }
            })
            // 增加购买数
            $('.add').click(function(){
                var n = $(this).siblings('.num').val()
                n++
                $(this).siblings('.num').val(n)
                var sum=$(this).parent().siblings('.sum')
                var pri=sum.siblings('.price').text()
                var p=pri.substr(1)
                var sumPri=(p*n).toFixed(2)
                sum.text('￥'+sumPri)
                getSum()
            })
            // 减少购买数
            $('.substract').click(function(){
                var n = $(this).siblings('.num').val()
                if(n==1){
                    return false
                }
                n--
                $(this).siblings('.num').val(n)
                var sum=$(this).parent().siblings('.sum')
                var pri=sum.siblings('.price').text()
                var p=pri.substr(1)
                var sumPri=(p*n).toFixed(2)/* toFixed(2)保留两位小数 */
                sum.text('￥'+sumPri)
                getSum()
            })
            // 手动输入购买数量
            $('.num').change(function(){
                // 输入值为非整数，向上取整
                var n=Math.ceil($(this).val())
                var sum=$(this).parent().siblings('.sum')
                var pri=sum.siblings('.price').text()
                var p=pri.substr(1)
                var sumPri=(p*n).toFixed(2)
                sum.text('￥'+sumPri)
                $(this).val(n)
            })
            getSum()
            function getSum(){
                var count=0   /* 计算总件数 */
                var money=0   /* 计算总价钱 */
                $('.num').each(function(i,ele){
                    count+=parseInt($(ele).val())
                })
                $('.sumNum').text(count)
                $('.sum').each(function(i,ele){
                    money+=parseFloat($(ele).text().substr(1))
                })
                $('.sumP').text('￥'+money.toFixed(2))
            }
            // 删除商品
            $('.del').click(function(){
                $(this).parents('.main').remove()
                getSum()
            })
            // 删除选中的商品
            $('.del_choice').click(function(){
                $('.checkItem:checked').parents('.main').remove()
                getSum()
            })
            // 清空购物车
            $('.delAll').click(function(){
                $('.main').remove()
                getSum()
            })
        })
    </script>
</body>

</html>
bsf000000___
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java代码模拟实现购物车，2024BAT大厂Java社招最全面试题
m0_60635245的博客
03-30 534
作为过来人，小编是整理了很多进阶架构视频资料、面试文档以及PDF的学习资料，针对上面一套系统大纲小编也有对应的相关进阶架构视频资料PDF的学习资料，针对上面一套系统大纲小编也有对应的相关进阶架构视频资料[外链图片转存中…(img-z66sEcmi-1711751094340)][外链图片转存中…(img-UVIfe3s2-1711751094341)]
jQuery实现简单购物车功能
m0_57202083的博客
09-01 2834
<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:6...
jquery做的购物车(效果非常好)
10-26
jquery做的购物车，效果不错，分享一下，希望对各位有用
jquery购物车代码（3种）
02-29
3种jquery实现的购物车页面。包括商品拖动到购物车，.net实现的xml格式！
购物车详情 图片切换
a1997bcd的博客
06-28 328
在这里插入代码片
Javascript-购物车结算-案例
weixin_34411563的博客
12-02 763
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> ...
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 1977
JavaScript购物车。
jQuery实现购物车
qq_52108058的博客
05-04 7219
文章目录前言一、购物车属性全选1.案例演示2.实现代码3.实现方法二、使用步骤1.引入库2.读入数据总结 前言 自己对index.html进行清楚的理解，清楚div包括的范围，class类名的写法，从而可以更容易写出js内容。 一、购物车属性全选 1.案例演示 当用户点击全选按钮的时候，把所有的商品复选框选中。 2.实现代码 $('.checkall').change(function(){ $('.j-checkbox, .checkall').prop("checked",$(this).
jQuery购物车完整功能实现，全代码详解（有动态效果图）
周百万的博客
07-25 8400
jQuery购物车 实现购物车完整功能全代码详解（有gif动态效果图）
案例：购物车 商品加减号
青衣的博客
09-02 548
<div class="c-container"> <div class="w"> <div class="cart-warp"> <!-- 头部全选模块 --> <div class="cart-thead"> <div class="t-checkbox"> <input type=.
前端——使用JQuery 实现点击加入购物车（二）
tingyu_的博客
07-20 4309
实现效果： 1.当鼠标放到购物车上时，购物车向左移动，并展示购物车中的商品 2.点击删除，可以在购物车中删除这个商品项 3.点击加，购物车中该商品数量增加1 4.点击减，购物车中该商品数量减少1，并且当减到1的时候，提示不能再减 一、鼠标的移入与移出： 在鼠标未移入的时候，页面效果是这样的： 在页面的右侧主要有两块： 1.购物车图标 2.鼠标移入购物车图标后，右侧部分左滑，显示购物车中的 商品，也就是下图这个样子： 在这里首先解释CSS部分，理解之后，JQuery部分就好理解了。..
jQuery+CSS3实现ToolTip效果特效代码
03-20
jQuery+CSS3实现ToolTip效果是一款基于jquery+css3实现的七款不同风格效果的ToolTip特效。
jquery+css3实现的带视觉差效果可互动的背景粒子动画特效特效代码
03-20
jquery+css3实现的带视觉差效果可互动的背景粒子动画特效源码是一段实现了可以调节粒子活动的速度视觉差效果互动代码，且鼠标可以控制粒子活动的方向，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用...
jQuery+css实现的切换图片功能代码
10-22
主要介绍了jQuery+css实现的切换图片功能代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,需要的朋友可以参考下
jQuery+CSS3实现响应式鼠标悬停图片边框炫酷动画特效特效代码
03-20
jQuery+CSS3实现响应式鼠标悬停图片边框炫酷动画特效源码是一款鼠标经过图片边框渐变动画特效。有需要的朋友可以直接下载使用，适应各大网站，本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码！
jquery+css3实现的网页背景图片固定内容切换特效特效代码
03-20
jquery+css3实现的网页背景图片固定内容切换特效源码是一段实现了将不同的图片固定在背景中，鼠标下拉时切换图片及图片所对应的相关内容的效果代码，唯一不同的是，图片固定在背景上不动，本段代码适应于所有网页...
jQuery实现简易购物车
qq_61735085的博客
03-30 205
【代码】jQuery实现简易购物车。
用jQuery做一个简单的购物车
StartChong
11-02 3873
用jQuery做一个简单的购物车 前言： 之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。 (img)自行准备 实现功能： 将商品添加到购物车（如果购物车有相同物品则累加对应数量） 小计计算与总和 积分计算与总和 实现数量的增加和减少（并同步小计和积分及其总和） 单个商品删除 批量删除 实现效果...
HTML期末学生大作业-奶茶网页作业html+css+javascript
最新发布
2401_84092068的博客
04-19 322
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-vmmQuLfV-1713492847142)]
jQuery+css使用按钮功能更改图片大小
05-24
可以通过jQuery和CSS实现按钮功能来更改图片大小。具体步骤如下： 1. 在HTML中添加一个按钮和一个图片元素： ``` <button id="resize-btn">点击调整图片大小</button> <img id="my-image" src="image.jpg" alt="My Image"> ``` 2. 在CSS中设置图片的初始大小： ``` #my-image { width: 200px; height: 200px; } ``` 3. 使用jQuery绑定按钮的点击事件，并在回调函数中更改图片的大小： ``` $('#resize-btn').click(function() { $('#my-image').css({ 'width': '300px', 'height': '300px' }); }); ``` 这将在点击按钮时将图片的宽度和高度更改为300像素。您可以根据需要调整这些值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值