简单的购物车效果

<!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. vue问题五：element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  2. 如何在国内使用google

    而Google却一直坚持“机器算法”至上,让信息以公正的排序结果呈现,对于IT人员来说国内不能用google进行搜索是很痛苦的. 公司邮件介绍了一些方法,mark一下还是很有用的. http://ww ...

  3. python核心模块方法

    ********************os模块: os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有 ...

  4. Hbase shell操作表

    启动hbase shell ./bin/hbase shell 1.创建表,查看表 create 'tableName', 'familykey1','familykey2',.... eg. cre ...

  5. dp[2019.5.25]

    1.实例计算(写出计算过程): 1)对维数为序列<5, 10, 3, 12, 5, 50, 6>的各矩阵,找出其矩阵链乘积的一个最优加全部括号. 这是一个矩阵连乘问题,基本知识可以参考: ...

  6. golang继承与接口

    继承 结构体 Go语言的结构体(struct)和其他语言的类(class)有同等的地位,但Go语言放弃了包括继 承在内的大量面向对象特性,只保留了组合(composition)这个最基础的特性. 组合 ...

  7. python-Web-flask-视图内容和模板

    2 视图内容和模板: 基本使用 #设置cookie值 @app.route('/set_cookie') def set_cookie(): response = make_response(&quo ...

  8. WPScan使用完整攻略：如何对WordPress站点进行安全测试

    转载自FreeBuf.COM 严正声明:本文仅限于技术探讨,严禁用于其他目的. 写在前面的话 在这篇文章中,我将告诉大家如何使用WPScan来对WordPress站点进行安全测试. WPScan是Ka ...

  9. yso中URLDNS的pop链分析(重新分析整理）

    #发现之前对这个链关注的点有点问题,重新分析了一下 由于最近面试的过程中被问到了yso中URLDNS这个pop链的工作原理,当时面试因为是谈到shiro的怎么检测和怎么攻击时谈到了这个.其实在实战中用 ...

  10. pacemaker入门

    原文链接:https://blog.csdn.net/a964921988/article/details/82628478 因为数据库部署在Linux上,需要做数据库集群实现高可用,而所有的Post ...