Day011 - 京東購(gòu)物車頁面（2018-11-13）


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <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>
    </head>
    <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">單價(jià)</div>
                <div class="left w120 center">數(shù)量</div>
                <div class="left w120 center">小計(jì)</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春裝商務(wù)白襯衫男修身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" readonly type="text" size="3" 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 class='delete' 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海瀾之家長(zhǎng)袖襯衫男牛津紡休閑干凈透氣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" readonly type="text" size="3" 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 class='delete' 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春季新品質(zhì)感柔軟長(zhǎng)袖襯衫男
                        </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" readonly type="text" size="3" 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 class='delete' 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>總計(jì): <span id="totalPrice">&yen;0.00</span></span>
                    <button id="pay" class="big-button">去結(jié)算</button>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js">
            
        </script>
        <script type="text/javascript">
            $(function (){
                function clickSelectAll(evt){               
                    var selectAll = $(evt.target);          
                    var flag = selectAll.prop('checked');
                    var selectOnes = $('.single-item input[type=checkbox]');
                    $.each(selectOnes, function(index, elem){
                        $(elem).prop('checked', flag);
                    });
                }
                
                function changeQty(evt){
                    var smallButton = $(evt.target);
                    var count = smallButton.parent().find('input');
                    var num = parseInt(count.val());
                    if (smallButton.text() == '+'){
                        num += 1;
                        count.val(num);
                        totalCount += 1
                    } else {
                        num < 2 ? 1 : num -= 1,
                        count.val(num);
                    }
                }
                function changePrice(evt){
                    changeQty(evt);
                    var count = $(evt.target).parent().find('input').val();
                    count = parseFloat(count)
                    var singlePrice = $(evt.target).parent().prev().find('.price').text();
                    singlePrice = parseFloat(singlePrice);
                    var price = $(evt.target).parent().next().find('span');
                    price.text((singlePrice*count).toFixed(2));
                }
                
                function totalCal(){
                    var totalCount = 0;
                    var totalPrice = 0;
                    var selectOnes = $('.single-item input[type=checkbox]');
                    $.each(selectOnes, function(index, elem){
                        if (elem.checked){
                            var count = $(elem).parent().parent().find('.count').val();
                            count = parseInt(count);
                            var price = $(elem).parent().parent().find('.price').html();
                            price = parseFloat(price);                  
                            totalCount += count;
                            totalPrice += price*count;
                        }
                    });
                    $('#totalCount').text(totalCount);
                    $('#totalPrice').html('&yen;' + totalPrice.toFixed(2));
                    return (totalPrice.toFixed(2));
                }
                
                function deleteLine(evt){
                    if (window.confirm('是否要移除商品？[y/n]')){
                        $(evt.target).parent().parent().remove();
                        totalCal();
                    }                   
                }
                
                function deleteSelected(){
                    if (window.confirm('是否要清除所選商品？[y/n]')){
                        var selectOnes = $('.single-item input[type=checkbox]');
                        $.each(selectOnes, function(index, elem){
                            if (elem.checked){
                                $(elem).parent().parent().remove();
                            }
                        });
                        totalCal();
                    }                   
                }
                
                function checkBill(evt){
                    var totalPrice = totalCal();
                    if (window.confirm('商品總價(jià)' + '￥' + totalPrice + '\n' +
                    '是否購(gòu)買商品？[y/n]')){
                        window.alert('訂單生成，請(qǐng)完成付款！');
                        window.close();
                    }
                }
                $('.single-item input[type=checkbox]').on('click',totalCal);
                
                $('#selectAll').on('click', function(evt){
                    clickSelectAll(evt);
                    totalCal();
                });
                $('.small-button').on('click', function(evt){
                    changePrice(evt);
                    totalCal();
                });
                
                $('.delete').on('click', deleteLine);
                $('#clearSelected').on('click', deleteSelected);
                $('#pay').on('click', checkBill);
            });
            
            
        </script>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容