Day29--课后作业（购物车）

作者: zxhlcl | 来源:发表于2018-11-11 23:55 被阅读0次

Day29--课后作业（购物车）
眼睛
W14L19-L20-电商法律问题
W14L19-L20-电商法律问题
函数值域专题
作业：购物车
有效教学
课后作业
课后作业
课后作业

CSS代码：

<style>
            * { 
                margin: 0;
                padding: 0;
            }
            body {
                width: 960px;
                margin: 20px auto;
            }
            #cart {
                margin: 0 auto;
                width: 850px;
            }
            #cart-header {
                height: 40px;
                background-color: lightgray;
                margin-bottom: 20px;
            }
            #cart-header div {
                line-height: 40px;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .w110 {
                width: 100px;
            }
            .ml10 {
                margin-left: 10px;
            }
            .w120 {
                width: 120px;
            }
            .w250 {
                width: 250px;
            }
            .center {
                text-align: center;
            }
            .w20 {
                width: 20px;
            }
            .w90 {
                width: 90px;
            }
            .clear {
                clear: both;
            }
            #cart-items>div {
                height: 100px;
            }
            #cart-items>div>div {
                line-height: 100px;
            }
            .w250 span {
                display: inline-block;
                font-size: 12px;
                line-height: 16px !important;
            }
            .single-item {
                border-bottom: 1px solid gray;
            }
            .small-button{
                display: inline-block;
                width: 20px;
                height: 20px;
                border: none;
            }
            .big-button {
                color: white;
                background-color: red;
                display: inline-block;
                width: 120px;
                height: 40px;
                border: none;
                font-size: 22px;
            }
            #totalCount, #totalPrice {
                color: red;
            }
            #totalPrice {
                font: bolder 20px Arial;
                display: inline-block;
                width: 150px;
            }
            #cart a {
                text-decoration: none;
            }
            #cart a:link, #cart a:visited, #cart a:active {
                color: gray;
            }
        </style>

HTML代码：

<body>
        <div id="cart">
            <div id="cart-header">
                <div class="left w110 ml10">
                    <input id="selectAll" type="checkbox">
                    <label for="selectAll">全选</label>
                </div>
                <div class="left w250">商品</div>
                <div class="left w120 center">单价</div>
                <div class="left w120 center">数量</div>
                <div class="left w120 center">小计</div>
                <div class="left w120 center">操作</div>
            </div>
            <div id="cart-items">
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a1.jpg">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span class="price">138.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input class="center count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>138.00</span></div>
                    <div class="left w120 center">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a2.jpg">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span class="price">128.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input class="center count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>128.00</span></div>
                    <div class="left w120 center">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a3.jpg">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span class="price">99.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input class="center count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>99.00</span></div>
                    
                    <div class="left w120 center">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
            </div>
            <div id="cart-footer">
                <div class="clear left">
                    <a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
                </div>
                <div class="right">
                    <span>总共选中了<span id="totalCount">0</span>件商品</span>
                    <span>总计: <span id="totalPrice">&yen;0.00</span></span>
                    <button id="pay" class="big-button">去结算</button>
                </div>
            </div>
        </div>
</body>

JS 代码：

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function(){
                
                
                //初始化
                $("#cart-items input[name='selectOne']").each(function(){
                    var price=$(this).parent().parent().children()[5].children[0].textContent;
                    var count=$(this).parent().parent().children()[4].children[1].value;
                    $(this).attr({"totalPrice":price,"count":count});   
                });
                
                showInfo();
                // 打印商品总计和总价
                function showInfo(){
                    var totalCount=0;
                    var totalPrice=0;
                    var selectOnelist=$("#cart-items input[name='selectOne']");
                    if(selectOnelist.length==0){
                        $("#totalCount").text("0");
                        $("#totalPrice").text("¥"+"0.00");
                    }
                    for (i=0;i<selectOnelist.length;i+=1){
                        var price=$(selectOnelist[i]).attr("totalPrice");
                        var count=$(selectOnelist[i]).attr("count");
                        if (selectOnelist[i].checked){
                            totalCount+=parseFloat(count);
                            totalPrice+=parseFloat(price);
                        }
                        $("#totalCount").text(totalCount);
                        $("#totalPrice").text("¥"+totalPrice.toFixed(2));
                    }
                }
                // 全选按钮
                $("#selectAll").on("click",function(){
                    if($("#selectAll").get(0).checked){
                        $("input[name='selectOne']").each(function(){
                            this.checked=true;
                        });
                    }
                    else{
                        $("input[name='selectOne']").each(function(){
                            this.checked=false;
                        });
                    }
                    showInfo();
                })
                // 数量减少按钮
                $("#cart-items button.small-button:even").on("click",function(evt){
                    var num=parseInt($(evt.target).next().val());
                    if(num==0){
                        $(evt.target).next().val(num);
                    }
                    else{
                        $(evt.target).next().val(num-1);
                    }
                    // 计算小计
                    var centerPrice=$(evt.target).parent().next().children();
                    var centerNum=$(evt.target).next().val();
                    var singlePrice=$(evt.target).parent().prev().children(".price").text();
                    centerPrice.text((parseFloat(singlePrice)*centerNum).toFixed(2));
                    // 改变selectOne的属性
                    var selectOne=$(evt.target).parent().parent().children()[0].children;
                    $(selectOne).attr({"totalPrice":centerPrice.text(),"count":$(evt.target).next().val()});
                    // 修改显示
                    showInfo();

                })
                // 数量增加按钮
                $("#cart-items button.small-button:odd").on("click",function(evt){
                    var num=parseInt($(evt.target).prev().val());
                    if(num==200){
                        $(evt.target).prev().val(num);
                    }
                    else{
                        $(evt.target).prev().val(num+1);
                    }
                    // 计算小计
                    var centerPrice=$(evt.target).parent().next().children();
                    var centerNum=$(evt.target).prev().val();
                    var singlePrice=$(evt.target).parent().prev().children(".price").text();
                    centerPrice.text((parseFloat(singlePrice)*centerNum).toFixed(2));                   
                    // 改变selectOne的属性
                    var selectOne=$(evt.target).parent().parent().children()[0].children;
                    $(selectOne).attr({"totalPrice":centerPrice.text(),"count":$(evt.target).prev().val()});
                    //修改显示
                    showInfo();
                })
                // 复选框
                $("#cart-items input[name='selectOne']").on("click",function(evt){
                    showInfo(); 
                })
                // 删除按钮
                $("#cart-items a").on("click",function(evt){
                    var confirm=window.confirm("are you sure?");
                    if (confirm){
                        $(evt.target).parent().parent().remove();
                    }
                    showInfo();
                })
                // 删除选中按钮
                $("a[id='clearSelected']").on("click",function(){
                    var confirm=window.confirm("are you sure?");
                    if (confirm){
                        $("#cart-items input[name='selectOne']").each(function(){
                        if($(this).get(0).checked){
                            $(this).parent().parent().remove();
                        }
                    });
                    }
                    showInfo();
                })
                
            });
            
        
        </script>

效果：