JS购物车编辑

实现了：第一件商品的加减
实现了：全选/全不选（使用prop而不是attr）
实现了：删除（遮罩层）

未实现：第二件商品的删除
未实现：小计及应付款额的初始化（写死的）

计算小数乘法时，要先乘100

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

        .div1 {

            border: 1px solid gainsboro;

            width: 950px;

            height: 60px;

        }

        .div-checkbox,

        .div-goods,

        .div-amount,

        .div-unit-price,

        .div-price,

        .div-del {

            border: 1px solid;

            width: 60px;

            height: 20px;

            padding: 20px;

            float: left;

            text-align: center;

        }

        .div-price {

            width: 100px;

        }

        .div-goods {

            width: 140px;

        }

        .div-amount {

            width: 140px;

        }

        .div-unit-price {

            width: 50px;

        }

        .div-total-price {

            border: 1px solid gainsboro;

            width: 950px;

            height: 60px;

            text-align: right;

        }

        .div-submit {

            width: 950px;

            text-align: right;

        }

        div#cover {

            /*遮罩层*/

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 1000px;

            z-index: 100;

            display: none;

            background-color: grey;

        }

        div#prompt {

            /*弹窗*/

            border: 2px solid yellow;

            display: none;

            position: fixed;

            top: 100px;

            left: 500px;

            z-index: 101;

            width: 300px;

            height: 200px;

        }

    </style>

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

    <script>

        $(function() {

            //全选

            var i = 0;

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

                i++;

                if (i % 2 != 0) {

                    //此处用attr则只能选中/取消一次

                    $(".cls-checked").prop("checked", true);

                } else {

                    $(".cls-checked").prop("checked", false);

                }

            });

            //通过name获取某一商品的按钮

            $("input[name='btn1']").click(function() {

                //数量

                var _amount = parseInt($("#id-txt-amount1").val());

                if ($(this).val() == "+") {

                    _amount++;

                } else if ($(this).val() == "-") {

                    if (_amount == 1) {

                        //必须买!

                        return;

                    }

                    _amount--;

                }

                $("#id-txt-amount1").attr("value", _amount);

                // 本商品的总价

                var _unitPrice = $("#id-unit-price1").html();

                var _thisPrice = parseFloat(_unitPrice * 100 * _amount / 100).toFixed(2);

                $("#id-price1").html(_thisPrice);

                // 总价

                var _otherPrice = $("#id-price2").html();

                var _totalPrice = parseFloat(_thisPrice + _otherPrice).toFixed(2);

                $("#id-total-price").html(_totalPrice);

            });

            //删除一条

            $(".div-del a").click(function() {

                showPrompt(this);

            });

        });

        function showPrompt(obj) {

            $("#cover").css("display", "block");

            // 10毫秒内透明度降为0.5

            $("#cover").fadeTo(10, 0.5);

            $("#prompt").css("display", "block");

            $("#prompt a").click(function() {

                $("#cover").css("display", "none");

                $("#prompt").css("display", "none");

                return;

            });

            $("#prompt input").click(function() {

                $("#cover").css("display", "none");

                $("#prompt").css("display", "none");

                $(obj).each(function() {

                    $(obj).parent("div").parent("div").remove();

                });

            });

        }

    </script>

    <body>

        <!--遮罩层-->

        <div id="cover"></div>

        <!--弹窗-->

        <div id="prompt">

            <div style="width: 100%;height: 20px;text-align: right;background-color: gray;">

                <a href="#">关闭</a>

            </div>

            <div style="text-align: center;background-color: white;width: 300px;height: 180px;line-height: 100px;">

                确认删除吗？

                <br />

                <input type="button" value="确定" />

            </div>

        </div>

        <!--表头------------------------------------------------------->

        <div class="div1">

            <div class="div-checkbox">

                <input type="checkbox" class="allPic"><b>全选</b></input>

            </div>

            <div class="div-goods"><b>项目</b></div>

            <div class="div-amount"><b>数量</b></div>

            <div class="div-unit-price"><b>单价</b></div>

            <div class="div-price"><b>小计</b></div>

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

        </div>

        <!--第一行------------------------------------------------------->

        <div class="div1">

            <div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div>

            <div class="div-goods">

                A

            </div>

            <div class="div-amount">

                <input type="button" value="-" name="btn1" />

                <input type="text" size="2" value="1" id="id-txt-amount1" />

                <input type="button" value="+" name="btn1" />

            </div>

            <div class="div-unit-price">

                ￥<span id="id-unit-price1">9.90</span>

            </div>

            <div class="div-price">￥<span id="id-price1">2.00</span></div>

            <div class="div-del"><a href="#">删除</a></div>

        </div>

        <!--第二行（未实现加减）------------------------------------------------------->

        <div class="div1">

            <div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div>

            <div class="div-goods">

                B

            </div>

            <div class="div-amount">

                <input type="button" value="-" class="btn2" />

                <input type="text" size="2" value="1" id="id-txt-amount2" />

                <input type="button" value="+" class="btn2" />

            </div>

            <div class="div-unit-price">

                ￥<span id="id-unit-price2">2.00</span>

            </div>

            <div class="div-price">￥<span id="id-price2">2.00</span></div>

            <div class="div-del"><a href="#">删除</a></div>

        </div>

        <div class="div-total-price">应付款额： ￥

            <span id="id-total-price">11.90</span>

        </div>

        <div class="div-submit">

            <input type="submit" />

        </div>

    </body>

</html>

JS购物车编辑的更多相关文章

JQuery案例：购物车编辑
购物车编辑实现了:商品的加减,总价的变动实现了:全选/全不选(使用prop而不是attr) 实现了:删除(遮罩层) <html> <head> <meta chars ...
js获取编辑框游标的位置
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
简单实用angular.js购物车功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Eclipse中jsp、js文件编辑时，卡死现象解决汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
js购物车计算价格
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
jira7通过全局js给编辑区自定义快捷键【原】
jira7编辑区自定义快捷键本文主要描述了jira7如何通过添加全局js引用,给文本编辑区自定义快捷键用以快速填充模板内容. jira 3/4/5可参考官方api https://developer ...
vue.js购物车
vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...
js 购物车的实现
购物车原理:创建一个构造函数,把涉及到的项目写成方法,然后把这些方法放到构造函数的原型对象上,通过按钮绑定,调用原型对象上的方法,实现对涉及项目的改变 html代码: <!DOCTYPE htm ...
三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...

随机推荐

Win10系列：C#应用控件进阶2
矩形若要绘制矩形需要用到Rectangle元素,通过指定Rectangle元素的Width和Height属性值来确定矩形的尺寸.而设置RadiusX和RadiusY属性值能得到圆角的矩形,这两个属性 ...
kafka 分区和副本以及kafaka 执行流程，以及消息的高可用
1.Kafka概览 Apache下的项目Kafka(卡夫卡)是一个分布式流处理平台,它的流行是因为卡夫卡系统的设计和操作简单,能充分利用磁盘的顺序读写特性.kafka每秒钟能有百万条消息的吞吐量,因此 ...
python 使用jinjia2 生成文件的空格处理
例如: <div> {% if True %} yay {% endif %} </div> 生成文件为 <div> yay </div> 两种方法解决 ...
移动端IOS 固定下方的输入框，点击输入框位置会变的修复
if(data=="ios"){ var _this = $(".publish"); //无键盘时输入框到浏览器窗口顶部距离 var noInputViewH ...
manhattan plots in qqplot2
###manhattan plots in qqplot2library(ggplot2)setwd("~/ncbi/zm/XPCLR/")read.table("LW. ...
Reading Level Assessment Using Support Vector Machines and Statistical Language Models-paper
Authors: Sarah E. Schwarm University of Washington, Seattle, WAMari Ostendorf University of Washingt ...
<a>链接添加样式问题
<a>链接是内联元素,必须设置成块元素block,才能有 width 和 height,不过你可以又定义display:block再定义成 display:inline 这样可以避免在IE ...
Linux 分支那么多，这里可以帮你缩小选择范围
Linux 分支那么多,这里可以帮你缩小选择范围 https://wiki.installgentoo.com/wiki/Babbies_First_Linux https://wiki.instal ...
搭建简单的FTP服务器
客户端部分主要使用C#提供的webclient类 (https://msdn.microsoft.com/library/system.net.webclient.aspx) 通过WebClient. ...
全志A33 lichee 搭建Qt App开发环境编写helloworld
开发平台 * 芯灵思SinlinxA33开发板淘宝店铺: https://sinlinx.taobao.com/ 嵌入式linux 开发板交流 QQ:641395230 Step 1 在虚拟机(Ce ...

JS购物车编辑

JS购物车编辑的更多相关文章

随机推荐

热门专题