简单的购物车效果

<!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. kotlin中匿名对象

    open class MyClass { private fun too()=object { var x : String ="x" } fun publictoo()=obje ...

  2. PAT 甲级 1027 Colors in Mars (20 分)（简单，进制转换）

    1027 Colors in Mars (20 分)   People in Mars represent the colors in their computers in a similar way ...

  3. 使用PostMan测试WebService接口

    使用PostMan测试WebService接口 参考资料: 通过XML请求WebServer  https://blog.csdn.net/qq_33933408/article/details/53 ...

  4. 网页是如何实现从剪贴板从读取图片并上传到server的

    代码比较简单,原理更简单,不多言请直接看代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  5. 【并行计算与CUDA开发】英伟达硬件加速编解码

    硬件加速 并行计算 OpenCL OpenCL API VS SDK 英伟达硬件编解码方案 基于 OpenCL 的 API 自己写一个编解码器 使用 SDK 中的编解码接口 使用编码器对于 OpenC ...

  6. 最新 苏宁java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.苏宁等10家互联网公司的校招Offer,因为某些自身原因最终选择了苏宁.6.7月主要是做系统复习.项目复盘.LeetCode ...

  7. Spring 控制器层如何调用DAO层

    1.写上注解 @Autowired 2.声明一个变量 private UserDao userDao; 3.注意!Spring里面数据库对象操作类不需要实例化就能调用

  8. Spring框架IOC和AOP介绍

    说明:本文部分内容参考其他优秀博客后结合自己实战例子改编如下 Spring框架是个轻量级的Java EE框架.所谓轻量级,是指不依赖于容器就能运行的.Struts.Hibernate也是轻量级的. 轻 ...

  9. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. shell 监控

    #!/bin/shsource /etc/profileserverName=$1dingDingName=$2 #获取内存情况memory=(`free | awk 'NR==2{print $2, ...