简单的购物车效果

<!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. Invoke-customs are only supported starting with Android O (--min-api 26) Message{kind=ERROR,……

    https://www.jianshu.com/p/434928537a90 在我使用构建版本gradle 26但是在将buildtoolsversion更改为27之后,就像这个图像     错误:e ...

  2. 文件上传对servlet的要求

    request.getParamter(String name)方法不能再使用了 需要使用request.getInputStream()获取输入流对象然后在进行读取数据 解析数据 ServletIn ...

  3. set serveroutput on 命令

    使用set serveroutput on 命令设置环境变量serveroutput为打开状态,从而使得pl/sql程序能够在SQL*plus中输出结果 使用函数dbms_output.put_lin ...

  4. Maven打包将依赖的jar一同打进去

    在pom.xml文件中添加: <build> <plugins> <plugin> <artifactId>maven-assembly-plugin& ...

  5. webview的学习总结：

    1.1: Weview常见的坑 及其 内存泄漏的解决方案: WebView 1. WebView常见的坑 API 16之前版本存在远程代码执行漏洞,该漏洞源自于程序没有正确限制使用WebView.ad ...

  6. Spark源码(1): SparkConf

    1. 简介 SparkConf类负责管理Spark的所有配置项.在我们使用Spark的过程中,经常需要灵活配置各种参数,来使程序更好.更快地运行,因此也必然要与SparkConf类频繁打交道.了解它的 ...

  7. 微信小程序 请求签名接口超时 踩坑路。。

    我们公司一般做开发都是先用测试机的接口调试功能,等功能都调试的差不多了,再换成线上的正式接口,因为正式接口要验证签名. 这几个功能都调试的差不多了,准备换成线上正式接口了,结果却出了问题,提示请求超时 ...

  8. 常见MIME类型列表整理

    译者注:英文原文标题为 Incomplete list of MIME types,意为不完整的/未完成的 MIME 类型列表. 这是一份 MIME 类型列表,以及各个类型的文档类别,按照它们的常见扩 ...

  9. FFMPEG 常用命令行

    目录 1. 分离音视频 2. 解复用 3. 视频转码 4. 视频封装 5. 视频剪切 6. 视频录制 7.叠加水印 8.将MP3转换为PCM数据 9. 推送RTP流.接收RTP流并存为ts文件 10. ...

  10. Mysql 设置远程连接(自用-----仅供参考)

    1.连接数据库 ----->  mysql -u root -p 2.给权限 ------>  grant all privileges on *.* to 'root'@'%' iden ...