实现购物车自动计价功能

最新推荐文章于 2021-06-29 18:41:00 发布
最新推荐文章于 2021-06-29 18:41:00 发布
阅读量523 收藏 1
点赞数
分类专栏： javascript 文章标签： 插件 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linux__xu/article/details/73017667
版权

借用shoppingCart插件,实现购物车的自动计价功能。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="../../css/cart.css">
    <script>
        /**
         * Created by Herb Steve on 2014/5/24.
         */
        $(function() {
            var adds=$('.add');
            var mins =$('.min');
            var selects = $('.goodsList input[type=checkbox]');
            var prices =$('.price');
            var nums =$('.num')
            function getTotal(){
                var total=0;
                for(var i=0;i<selects.length;i++){
                    var select =selects.eq(i);
                    if(select.attr("checked")){
                       var num =nums.eq(i).val();
                       var price = prices.eq(i).text();
                        total = parseFloat(total)+parseFloat(num)*parseFloat(price);
                    }
                }

                $('#total').text(total.toFixed(2));
            };

                selects.click(function(){
                    getCount();
                    getTotal();
                });

            adds.on('click',function(){
                var num= $(this).siblings('.num');
               console.log("fasdfasd");
                num.val(parseInt(num.val())+1);
                getTotal();
            });

            nums.on('change',function(){
                getTotal();
            });

            mins.on('click',function(){
                var num =$(this).siblings('.num');
                if(num.val()>1) {
                    num.val(parseInt(num.val()) - 1);
                    getTotal();
                }
            });



            $('.common #selectAll').on("click",function(){
                    for(var i=0;i<selects.length;i++){
                        selects.eq(i).attr("checked",true);
                    }

                    getCount();
                    getTotal();
            });

            $(' #cancel').on("click",function(){
                for(var i=0;i<selects.length;i++){
                    selects.eq(i).attr("checked",false);

                }
                getTotal();
                $('#count').text(0);
            });

           function getCount(){
               var count=0;
                for( var i=0;i<selects.length;i++){
                    if(selects.eq(i).attr("checked")){
                        count++;
                    }
                }
               $('#count').text(count);
            }


        });
    </script>
</head>
<body>
<div class="shoppingCart">
    <div class="header">
            <div class="Content">
                <span class="common firstTab">选中</span>
                <span class="common secondTab">商品</span>
                <span class="common thirdTab">单价</span>
                <span class="common fourthTab">数量</span>
                <span class="common lastTab">操作</span>
        </div>
    </div>
    <div class="goodsList">
            <div class="listContent">
                <span class="firstTab common">
                     <input  type="checkbox"/>
                </span>
                <div class="secondTab common">
                    <img class="goodsImg" src="../../img/1.jpg">
                    <a class="goodsLink" href="">
                               做最好用的平板做最好用的平板
                               做最好用的平板
                               做最好用的平板
                    </a>
                </div>
                <span class="thirdTab common price specialItem ">1499</span>
                <div class="fourthTab common">
                    <input type="button" class="min" value="-">
                    <input type="text" class="num" value="1">
                    <input type="button" class="add" value="+">
                </div>
                <a class="lastTab common" href="">删除</a>
        </div>
    </div>

    <div class="goodsList">
        <div class="listContent">
                <span class="firstTab common">
                     <input  type="checkbox"/>
                </span>
            <div class="secondTab common">
                <img class="goodsImg" src="../../img/1.jpg">
                <a class="goodsLink" href="">
                    做最好用的平板做最好用的平板
                    做最好用的平板
                    做最好用的平板
                </a>
            </div>
            <span class="thirdTab common price specialItem ">1499</span>
            <div class="fourthTab common">
                <input type="button" class="min" value="-">
                <input type="text" class="num" value="1">
                <input type="button" class="add" value="+">
            </div>
            <a class="lastTab common" href="">删除</a>
        </div>
    </div>


    <div class="goodsList">
        <div class="listContent">
                <span class="firstTab common">
                     <input  type="checkbox"/>
                </span>
            <div class="secondTab common">
                <img class="goodsImg" src="../../img/1.jpg">
                <a class="goodsLink" href="">
                    做最好用的平板做最好用的平板
                    做最好用的平板
                    做最好用的平板
                </a>
            </div>
            <span class="thirdTab common price specialItem ">1499</span>
            <div class="fourthTab common">
                <input type="button" class="min" value="-">
                <input type="text" class="num" value="1">
                <input type="button" class="add" value="+">
            </div>
            <a class="lastTab common" href="">删除</a>
        </div>
    </div>



    <div class="footer">
            <div class="Content">

                    <div class="common">
                        <input class="selectBtn" id="selectAll"  type="button" value="全选">

                        <input class="selectBtn" id="cancel" type="button" value="取消选择">
                    </div>

                <div class="common count" >
                    选中商品数:
                    <span id="count" class="specialItem">
                        0
                    </span>
                </div>
                <div class="common total">
                    总金额:<span id="total" class="specialItem">0.00</span>
                </div>
            </div>
    </div>

</div>
</body>
</html>

实现的效果图如下：


九月刑天
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现购物车功能
陌默
02-26 429
&lt;!DOCTYPE html&gt;&lt;html ng-app="App"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angular
购物车价格自动计算
12-23
session保存数据结算，无刷新效果，添加删除，添加购物车
用js实现购物车自动计价功能
04-29 3209
       当选择修改数据后将自动计算每一个物品的的总价,并重新计算所有物品的总价.因为没有做太多兼容性的东西,所以只在firefox下测试过.DOM         物品编号物品名称数量价格小计             jsp_123电脑19501950        jsp_123电脑19501950        jsp_123电脑19501950        jsp_1
购物车自动结算功能
热门推荐
ITDragon博客
12-20 1万+
选中商品后更改商品数量和删除商品，自动计算总价。 效果图： 代码： 购物车 *{margin: 0;padding: 0} a{text-decoration: none;} ul li{float: left;list-style: none;} #wrapper{max-width: 640px;min-width
jQuery购物车自动计算金额表单
06-01
NULL 博文链接：https://zhitangrui2010.iteye.com/blog/2219537
vue实现购物车结算功能
10-15
在实现购物车结算功能时，Vue.js能够有效地组织代码，并实现数据流的管理和用户交互。以下将详细介绍如何使用Vue.js实现购物车结算功能的关键知识点。 ### 1. 响应式数据绑定 在Vue.js中，数据是通过数据对象与...
jQUery购物车加减计价与全选全不选
11-02
在这个"jQuery购物车加减计价与全选全不选"的主题中，我们将探讨如何利用jQuery来实现购物车的基本操作。 1. **商品添加与删除**： - 添加：当用户点击“加入购物车”按钮时，可以通过jQuery获取商品ID和数量，...
下单自动计算总金额demo
10-10
一个简单的下单页Demo，可以用加号按钮、减号按钮、和直接填写的三种方式修改数量。然后自动计算出小计和总计。
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
07-15
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
Spring Aop实现共享单车按小时计费
05-25
用SpringAop思想写共享单车按小时计费，用代理类来实现计费
jQuery仿淘宝购物车自动结算金额效果
08-08
jQuery仿淘宝购物车自动结算金额效果，可根据商品单位和用户选购数量自动计算商品总值，适时计算，ajax 方式，用户修改产品时，最终的计算结果也会发生变化，适合用于在线购物一类的网站使用的网页特效。
购物车脚本.sh
07-03
简单入门linux下的shell脚本，实现基本购物车功能，输入金额、选择购买商品、选择是否继续购买，结算订单、显示余额等功能。
基于STM32的智能超市购物车.zip
10-16
这可能涉及到一系列的智能功能，如自动计价、商品识别、电子支付、库存管理等，旨在提高顾客购物体验和超市运营效率。 【文件解析】 压缩包内的"基于STM32的智能超市购物车.pdf"可能是项目的详细报告或教程，涵盖了...
新思维超市智能购物车.pdf
03-12
它利用RFID或条形码扫描技术，实现商品的快速计价，减少了人工干预，提高了结账速度。此外，智能导航功能可以帮助顾客快速找到所需商品的位置，提高购物效率。 **3. 市场机会与竞争分析** 智能购物车的推广前景...
html计算商品金额,javascript实现点击商品列表checkbox实时统计金额的方法
weixin_39830313的博客
06-29 579
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">商品列表统计金额body,div,p{margin:0;padding:0;font-size:14px;}#sumMoney{font-size:26px;font-weight:bold;color:Red;}//全选和全清function checkAll()...
实现购物车加减计价功能
weixin_33829657的博客
09-23 291
直接复制粘贴即可 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l...
JavaScript实现购物车功能的代码详解
"本文将详细介绍如何使用JavaScript实现一个基本的购物车功能，包括价格计算、商品数量更改和商品删除。示例中涉及JavaScript的基础知识有BOM操作、DOM操作、表格处理、Cookie以及JSON的使用，并采用了三层架构设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值