JS购物车编辑

Posted 2020-09-27 Andy 胡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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</spanVSCode自定义代码片段9——JS中的面向对象编程
 JS购物车编辑
 angularJS使用ocLazyLoad实现js延迟加载
 VSCode自定义代码片段12——JavaScript的Promise对象
 VSCode自定义代码片段12——JavaScript的Promise对象
 JS周刊#405 - 精通模块化 JS，Parcel 1.10.0 发布，Trix 1.0 富文本编辑器，创建虚拟鸟类的簇拥行为