简单的购物车效果

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>购物车</title>

       <link rel="stylesheet" type="text/css" href="css/index.css"/>

    </head>

    <body>

        <div class="container">

            <h2 style="text-align: center;">购物车</h2>

            <!-- 内容部分 -->

            <div class="main">

                <ul>

                    <li>

                        <!-- 选择部分 -->

                        <label>

                            <input type="checkbox" name="" id="">

                        </label>

                        <!-- 产品 -->

                        <div class="cp">

                            <img src="img/timg.jpg">

                        </div>

                        <!-- 价格 -->

                        <div class="cp-price">

                            <span>32</span>

                            <span class="nummoneys" hidden="hidden">32</span>

                        </div>

                        <!-- 数量加减 -->

                        <div class="num">

                            <div class="sub">-</div>

                            <input type="number" name="" id="" value="1">

                            <div class="add">+</div>

                        </div>

                    </li>

                    <li>

                        <!-- 选择部分 -->

                        <label>

                            <input type="checkbox" name="" id="">

                        </label>

                        <!-- 产品 -->

                        <div class="cp">

                            <img src="img/timg.jpg">

                        </div>

                        <!-- 价格 -->

                        <div class="cp-price">

                            <span>45</span>

                            <span class="nummoneys" hidden="hidden">45</span>

                        </div>

                        <!-- 数量加减 -->

                        <div class="num">

                            <div class="sub">-</div>

                            <input type="number" name="" id="" value="1">

                            <div class="add">+</div>

                        </div>

                    </li>

                </ul>

            </div>

            <!-- 结算部分 -->

            <div class="footer">

                <!-- 全选 -->

                <div class="select-all">

                    <label>

                        <input type="checkbox" />

                        <span>全选</span>

                    </label>

                </div>

                <div class="left">

                    <div>

                        <font>总件数：</font>

                        <span class="nums">0</span>

                        <font>件</font>

                    </div>

                    <div>

                       <font>总价：</font>

                        <span class="moneys">￥0</span>

                    </div>

                </div>

            </div>

        </div>

    </body>

    <script src="js/jquery-2.1.0.js"></script>

    <script src="js/index.js"></script>

</html>
/* css样式 */
* {

    margin:;

    padding:;

    list-style: none;

}

.container {

    width: 400px;

    height: 500px;

    border: 1px solid red;

    margin: 0 auto;

}

.container ul li {

    border-bottom: 1px solid #666;

    display: flex;

    align-items: center;

}

.container ul li .cp {

    width: 80px;

    height: 80px;

}

.container ul li .cp img {

    width: 100%;

    height: 100%;

}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none !important;

    margin:;

}

/* 数量部分 */

.num {

    padding-left: 20px;

}

.num div {

    width: 20px;

    height: 20px;

    border: 1px solid #ccc;

    line-height: 20px;

    text-align: center;

    cursor: pointer;

    user-select: none;

}

.num input {

    width: 22px;

    box-sizing: border-box;

    text-align: center;

}

/* 结算部分 */

.left span {

    display: inline-block;

    width: 10%;

    text-align: center;

}
// jQuery

$(function(){

   // 全选按钮

   $(".select-all input").change(function(){

       // 将所有的单选按钮选中

       $("li label input").prop("checked",$(this).prop("checked"));

       numPrice()

   });

   // 单选按钮

     $("li label input").change(function(){

        // 获取单选框的个数

        var numInput=$("li label input").length;

        //获取被点击后复选框的个数

        var selInput=$("li label input:checked").length;

        // 判断点击个数是否等于总个数

        if(numInput==selInput){

            $(".select-all input").prop("checked",true);

        }else{

            $(".select-all input").prop("checked",false);

        }

        numPrice()

     });

     // 价格及数量的计算

     function numPrice(){

         // 定义变量存放单个商品数量

         var numBox=$(".num input");

         // 定义变量存放价格和商品总数量

         var money=0;

         var num=0;

         for (var i = 0; i < numBox.length; i++) {

             if(numBox.eq(i).parents("li").find("label input").get(0).checked){

                 // 商品件数

                 num+=parseInt(numBox.eq(i).val());

                 // 商品价格

                 money+=parseFloat(numBox.eq(i).parents("li").find(".cp-price .nummoneys").text());

             }

         }

         // 更换结算部分

         $(".nums").text(num);

         $(".moneys").text(money);

     }

     // 加商品个数

    $(".add").click(function(){

        //获取商品个数

        var addnum=parseInt($(this).parents("li").find(".num input").val());

        $(this).prev().val(addnum+=1);

        //计算该商品的总价格

        var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text());

        // 替换原价格

        $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys);

        numPrice()

    });

    // 减个数

    $(".sub").click(function(){

        //获取商品个数

        var addnum=parseInt($(this).parents("li").find(".num input").val());

        if(addnum<=1){

            addnum=1;

            return false;

        }

        $(this).next().val(addnum-=1);

        //计算该商品的总价格

        var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text());

        // 替换原价格

        $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys);

        numPrice()

    });

    // 手动改变数量

    $("li .num input").blur(function(){

        //获取商品个数

        var addnum=parseInt($(this).parents("li").find(".num input").val());

        if(addnum<=1){

            addnum=1;

             $(this).val(addnum)

        }

        $(this).next().val(addnum-=1);

        //计算该商品的总价格

        var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text());

        // 替换原价格

        $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys);

        numPrice()

    });

});

jQuery实现购物车效果的更多相关文章

  1. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  2. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  3. jQuery实现购物车计算价格功能的方法

    本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考.具体如下: 目的: <%@ page language="java" con ...

  4. PC,移动端H5实现实现小球加入购物车效果

    HTML部分: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  5. 使用session页面控制登录入口及购物车效果的实现

          由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只 ...

  6. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  7. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  8. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

随机推荐

  1. 在调试linux的休眠功能时如何打开调试信息开关？

    答:在bootargs中添加参数no_console_suspend即可进行调试

  2. <JavaScript>可枚举属性与不可枚举属性

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  3. vue2.0中 怎么引用less？

    vue2.0中  怎么引用less? 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置l ...

  4. 安卓 通过intent调用系统文件管理器打开指定路径目录

    安卓 通过intent调用系统文件管理器打开指定路径目录     转  https://blog.csdn.net/qq_34161388/article/details/78586247 当我们知道 ...

  5. 【I·M·U_Ops】------Ⅱ------ IMU自动化运维平台之CMDB

    说明本脚本仅作为学习使用,请勿用于任何商业用途.本文为原创,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. #A 我理解的 CMDB CMDB翻译过来,Configuratio ...

  6. css中em小于1时chrome字体大小和firefox字体大小不一致的问题

    css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...

  7. python基础--字符串、元组

    字符串方法 注:字符串和元组一样都是不可变的,以下函数不会改变原来字符串的值,可以将其赋给一个新的变量 st='a b c d,f,g' st_list=st.split()#字符串分割,参数不写,按 ...

  8. golang web框架设计3：controller设计

    继续学习golang web框架设计 controller作用 MVC设计模式里面的这个C,控制器. Model是后台返回的数据: View是渲染页面,通常是HTML的模板页面: Controller ...

  9. 初学django框架 (urls,include子路由，render模板渲染)(一)

    一.urls url的使用为了告诉django哪个url调用那一段代码 如上左图所示,后面的test,test1如下图所示,为视图函数,通过前面的路径,调用后面函数的代码: 只有输入正确的url才会在 ...

  10. Jetson TX2 不同的工作模式

    Jetson TX2 有五种工作模式,下面介绍这几种工作模式下电压.频率以及如何启动. 原理图 几种不同的工作模式 mode mode name Denver Frequency ARM Freque ...