<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>购物车</title>

  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

  <style>

    *{margin: 0;padding: 0}

    a{text-decoration: none;}

    ul li{float: left;list-style: none;}

    #wrapper{max-width: 640px;min-width: 320px;font-size: 12px;font-family: "微软雅黑";height: 370px;margin: 50px auto;}

    #wrapper #content{width: 100%;float: left;}

    #wrapper #content .goods_lists{width: 100%;float:left; }

    #wrapper #content .goods_lists .list{width:96%;padding: 0 2%;}

    #wrapper #content .goods_lists .list li{width: 100%;height: 100px;border: 1px solid #c7000a;margin-top: 15px;float: left;background: #fffefe;}

    .goods_lists .list li .checkbox{width: 12px;height: 12px;position: relative;border:1px solid #999 ;float: left;margin-top: 45px;margin-left: 2%;z-index: 1}

    .goods_lists .list li .checkbox .c_xz{position: absolute;top: -1px;left: 0px;width: 12px;height: 12px;display: none;}

    .goods_lists .list li .door{float: left;width: 74px;height: 74px;margin: 12px 0 0 3%;border: 1px solid #999;}

    .goods_lists .list li .l_right{width: 62%;height: 74px;float: left;margin-top: 12px;padding-left: 2%}

    .goods_lists .list li .l_right .l_r_desc{max-width: 100%;overflow: hidden;color: #555; line-height:22px;height: 22px;}

    .goods_lists .list li .l_right .price{color: #555;}

    .goods_lists .list li .l_right .price span{color: #c7000a;}

    .goods_lists .list li .l_right .old_price{text-decoration: line-through;float: left;width: 100%;color: #555}

    .goods_lists .list li .l_right .l_bot{width: 66%;height:20px;float: right; color: #555;}

    .goods_lists .list li .l_right .l_bot p{float: left;padding-top: 2px;}

    .goods_lists .list li .l_right .l_bot input{float: left;width:17%;height: 14px;text-align: center;border:1px solid #999;margin-top: 3px; }

    .goods_lists .list li .l_right .l_bot a{float: left; margin: 3px 3%;}

    .goods_lists .list li .l_right .l_bot .rubbish{margin-left: 5%;}

    #wrapper #content .checkout{float: left;width: 100%;height: 50px;background: #fffefe;border-top:1px solid #999;border-bottom: 1px solid #999;margin-top: 20px; }

    #wrapper #content .checkout .c_left{float: left;width: 47%;height: 35px;font-size: 12px;color: #555;padding-left: 3%;line-height: 50px;}

    #wrapper #content .checkout .c_left span{color: #c7000a;}

    #wrapper #content .checkout .c_right{float: left;width: 50%;height: 50px;background: #c7000a;color: #fefdfd;text-align: center;font-size: 14px;line-height: 50px;}

 </style>

 </head>

 <body>

    <div id="wrapper">

        <div id="content">

            <div class="goods_lists">

                <ul id="listbox" class="list">

                    <li>

                        <div class='checkbox'>

                            <div class='c_xz'><img src='images/checkbox.png' width='12' height='12'></div>

                        </div>

                        <a class='door' href='javascript:void(0);'><img src='images/list1.jpg' width='74' height='74' alt='阿迪达斯男鞋' /></a>

                        <div class='l_right'>

                            <p class='l_r_desc'>ADIDAS阿迪达斯 三叶草经典板鞋 ZX700跑步鞋</p>

                            <p class='price'>价格：<span>￥<span class='money'  data-money='461'>461.00</span></span></p>

                            <p class='old_price'>885.00</p>

                            <div class='l_bot'>

                                <p>数量 :</p>

                                <a class='remove' href='javascript:void(0);'><img src='images/remove.png' width='15' height='15'></a>

                                <input type='text' data-max='10' class='num' value='1' />

                                <a class='add' href='javascript:void(0);'><img src='images/add.png' width='15' height='15'></a>

                                <a class='rubbish' href='javascript:void(0);'><img src='images/rubbish.png' width='14' height='16'></a>

                            </div>

                        </div>

                    </li>

                    <li>

                        <div class='checkbox'>

                            <div class='c_xz'><img src='images/checkbox.png' width='12' height='12'></div>

                        </div>

                        <a class='door' href='javascript:void(0);'><img src='images/list2.jpg' width='74' height='74' alt='iphone6s plus' /></a>

                        <div class='l_right'>

                            <p class='l_r_desc'>Apple/苹果 iPhone 6s Plus Android6.0操作系统</p>

                            <p class='price'>价格：<span>￥<span class='money'  data-money='3999.99'>3999.99</span></span></p>

                            <p class='old_price'>5768.00</p>

                            <div class='l_bot'>

                                <p>数量 :</p>

                                <a class='remove' href='javascript:void(0);'><img src='images/remove.png' width='15' height='15'></a>

                                <input type='text' data-max='10' class='num' value='1' />

                                <a class='add' href='javascript:void(0);'><img src='images/add.png' width='15' height='15'></a>

                                <a class='rubbish' href='javascript:void(0);'><img src='images/rubbish.png' width='14' height='16'></a>

                            </div>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="checkout">

                <div class="c_left">

                    合计(不含运费): <span>￥<span id="sum">0.00</span></span>

                </div>

                <a href="javascript:">

                    <div class="c_right">

                        单子（<span id="count">0</span>）

                    </div>

                </a>

            </div>

        </div>

    </div>  

    <script type="text/javascript">

        $(function(){

            //删除商品

            $("#listbox").on("click",".rubbish",function(){

                $(this).parents("li").remove();

                tm_total();

            });  

            //商品复选框的选中和不选中

            $("#listbox").on("click",".checkbox",function(){

                $(this).find(".c_xz").toggle();

                tm_total();

            });  

            //商品数量的添加和减少

            $("#listbox").on("click",".add",function(){

                var $input = $(this).prev();

                var value = $input.val();

                var max = $input.data("max");

                value++;

                if(value > max)value = max;

                $input.val(value);

                tm_total();

            }).on("click",".remove",function(){

                var $input = $(this).next();

                var value = $input.val();

                value--;

                if(value<=0)value=1;

                $input.val(value);

                tm_total();

            });

        });  

        //求总和

        function tm_total(){

            var total = 0;

            $("#listbox").find("li").each(function(){

                var flag = $(this).find(".c_xz").is(":visible");

                if(flag){

                    var money = $(this).find(".money").data("money");

                    var number = $(this).find(".num").val();

                    total += money * number;

                }

            });

            //求用户购买了多少个商品

            var length =$("#listbox").find(".c_xz:visible").length;

            $("#count").text(length);

            $("#sum").text(total);

        };  

    </script>  

 </body>

</html>

【JavaScript&jQuery】购物车自动结算的更多相关文章

  1. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  2. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  3. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  4. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

  5. GBin1插件推荐之马可波罗（Marco Polo)，jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

  6. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. 在eclipse-jee-juno中配置Aptana对jQuery代码自动提示

    主要问题 在Aptana的Web Project中打开js文件有JavaScript的自动提示,但是在JavaEE项目中却没有. 版本 eclipse-jee-juno,即Eclipse 4.2的Ja ...

  8. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  9. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

随机推荐

  1. 自己在UWP程序上调用usb转串口的路程

    之前一直是在普通的framework环境下写串口,使用的类为 SerialPort 这个类大家可能比较熟悉.但是在UWP的开发里,使用的是 SerialDevice 这个类,是不一样的. 1. 清单文 ...

  2. 有关Laravel 4 的 Homestead 安装部署的细节

    对于Vagrant,我是相见恨晚的.有时候抽出几个小时的时间学会一种工具,对于将来可以节省几十甚至几百小时的时间. Vagant最大的好处就是节省了安装配置运行环境的时间,统一开发环境,同时可以最大限 ...

  3. LAUNCHXL-28379D入门学习-第一篇

    1. 首先安装controlSUITE或者C2000ware软件,TI官网下载,安装后包括C2000的函数库和例程之类的,还可以和CCS搭配使用.controlSUITE安装完之后大约4个G,所以我安 ...

  4. scala ： 类型与类

    scala类型系统:1) 类型与类 在Java里,一直到jdk1.5之前,我们说一个对象的类型(type),都与它的class是一一映射的,通过获取它们的class对象,比如 String.class ...

  5. 【jQuery学习】用JavaScript写一个输出多选框的个数报错:Cannot set property 'onclick' of null"

    说明:代码段来源于:<锋利的jQuery> 根据代码段我补充的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  6. 行驶证识别/行驶证OCR识别全方位解析

    本文全面解析行驶证OCR识别,包括什么是行驶证OCR识别.如何选择行驶证识别软件.如何操作行驶证识别软件,以及该软件应用的领域等. 一.了解行驶证识别/行驶证OCR识别 行驶证OCR识别技术,也叫行驶 ...

  7. nodejs express 加载html模板

    在nodejs中如使用express框架,她默认的是ejs和jade渲染模板.由于我在使用的时候觉得她的代码书写方式很不爽还是想用html的形式去书写,于是我找了使用了html模板. 直接上代码,主要 ...

  8. Visual Assist 试用期过期怎么办？

    Visual Assist 试用期过期怎么办 VS这个强大的编译器常常会配置番茄小助手 Visual Assist,但是有时候试用期会过期,又想免费试用,怎么办呢? 有一个方法可以充值番茄助手的试用期 ...

  9. Vyatta 网络操作系统

    原文发表于:2010-09-19 转载至cu于:2012-07-21 以下是"开源中国社区"写到的: http://www.oschina.net/news/11423/vyatt ...

  10. 请教Amazon FBA里面Label Service, Stickerless, Commingled Inventory是什么意思?

    Accept Label Service接受标签服务,选择了以后下面的操作中会有一个让您打印标签的流程,您就可以按照FBA流程提示进行每一步标签服务的操作. Accept Stickless, Com ...