宝宝辅食大全

captainfly_

已于 2023-06-16 13:00:10 修改

阅读量161

点赞数

文章标签： java 数学建模开发语言

于 2023-06-12 23:58:48 首次发布

本文链接：https://blog.csdn.net/captainfly_/article/details/131179171

版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cart.css">
    <script src="cart.js"></script>
</head>
<body>
    <div class="container">
        <div class="shop">
            <div class="header">
                <input type="checkbox" class="shop_checkbox">
                <span class="shop_icon"></span>
                <span class="shop_name">店铺：麦象旗舰店</span>
                <span class="wangwang_icon"></span>
            </div>
            <div class="items">
                <div class="item">
                <div><input class="item_checkbox" type="checkbox" name="" id=""></div>
            <div>
                <span class="item_img"></span>
            </div>
            <div class="item_name">
                <div>电脑桌下键盘54滑轨道托盘60配件70静音吊装键盘托</div>
                <div class="promotion_icons"><span><span><span></span></span></span></div>
            </div>
            <div class="sku">颜色分类：圆角70*120，吊装</div>
            <div class="price">
                <div class="price1">87.0</div>
                <div class="price2" data-price="78">78.0</div>
            </div>
            <div class="num_control">
                <span class="num_minus">-</span><input type="text" class="num" value=""><span class="num_plus">+</span>
            </div>
            <div class="item_price_total">
                <span>78.0</span>
            </div>
            <div class="operation">
                <div>移入收藏夹</div>
                <div>删除</div>
            </div>
            </div> 
        </div>
    </div>
    <div class="shop">
        <div class="header">
            <input type="checkbox" class="shop_checkbox">
            <span class="shop_icon"></span>
            <span class="shop_name">店铺：麦象旗舰店</span>
            <span class="wangwang_icon"></span>
        </div>
        <div class="items">
            <div class="item">
            <div><input class="item_checkbox" type="checkbox" name="" id=""></div>
        <div>   
            <span class="item_img"></span>
        </div>
        <div class="item_name">
            <div>电脑桌下键盘54滑轨道托盘60配件70静音吊装键盘托</div>
            <div class="promotion_icons"><span><span><span></span></span></span></div>
        </div>
        <div class="sku">颜色分类：圆角70*120，吊装</div>
        <div class="price">
            <div class="price1">87.0</div>
            <div class="price2" data-price="58">58.0</div>
        </div>
        <div class="num_control">
            <span class="num_minus">-</span><input class="num" type="text" value=""><span class="num_plus">+</span>
        </div>
        <div class="item_price_total">
            <span>58.0</span>
        </div>
        <div class="operation">
            <div>移入收藏夹</div>
            <div>删除</div>
        </div>
        </div>
    <div class="item">
    <div><input class="item_checkbox" type="checkbox" name="" id=""></div>
<div>
        <span class="item_img"></span>
    </div>
    <div class="item_name">
        <div>电脑桌下键盘54滑轨道托盘60配件70静音吊装键盘托</div>
        <div class="promotion_icons"><span><span><span></span></span></span></div>
    </div>
    <div class="sku">颜色分类：圆角70*120，吊装</div>
    <div class="price">
        <div class="price1">87.0</div>
        <div class="price2" data-price="68">68.0</div>
    </div>
    <div class="num_control">
        <span class="num_minus">-</span><input class="num" type="text" value=""><span class="num_plus">+</span>
    </div>
    <div class="item_price_total">
        <span>68.0</span>
    </div>
    <div class="operation">
        <div>移入收藏夹</div>
        <div>删除</div>
    </div>
    </div>
</div>
</div>
    <div class="checkout">
        <div><input type="checkbox"><span>全选</span></div>
        <div>已选商品<span class="checked_num"></span>件</div>
        <div>合计（不含运费）<span class="total_price" >0.00</span></div>
        <div class="checkout_button">结算</div>
    </div>
</div>
</body>
</html>

css

.container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    color: #444444;
}
.header{
    margin: 8px;
}
.shop_icon, .wangwang_icon, .promotion_icons span{
    display: inline-block;
    height: 15px;
    width: 15px;
    background-color: blue;
    
}
.promotion_icon span{
    margin-right: 4px;
}
.items
{
    border: 1px solid #ebe9e9;
}
.item
{
    display: flex;
    margin: 8px;
}
.item_img{
    width: 100px;
    height: 100px ;
    display: inline-block;
    background-color: aquamarine;
    margin-left:6px;
    margin-right: 6px;
}
.item_name
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sku,.price,.num_control,.item_price_total,.operation{
    margin-left: 18px;
}
.num{
    width: 18px;
    padding: center;
}
.num_control{
    display: flex;
    align-items: baseline;
}
.num_minus,.num_plus{
    width: 18px;
    height: 22px;
    display: inline-block;
    background-color:#ebe9e9 ;
    text-align: center;
    cursor: pointer;
}
.checkout{
    display: flex;
    justify-content: space-between;
}
.shop{
    margin-bottom: 20px;
    margin-top: 20px;
}
.price1
{
    text-decoration: line-through;
    color: grey;
}
.checked_num,.total_price{
    font-size: large;
    color: red;
    margin-left: 3px;
    margin-right: 3px;
}

JavaScript

function updatePrice(){
    let items = document.querySelectorAll('.item');
    let totalNum = 0;
    let totalPrice = 0;
    items.forEach(function(item){
        if(item.querySelector('.item_checkbox').checked){
            let num = item.querySelector('.num').value;
            totalNum = totalNum + parseInt(num);
            let price = item.querySelector('.price2').getAttribute('data-price');
            totalPrice = totalPrice + parseFloat(price) * num;

        }
    });
    document.querySelector('.checked_num').innerText = totalNum;
    document.querySelector('.total_price').innerText = totalPrice;
}
window.onload = function()
{
   let itemCheckboxes = document.querySelectorAll('.item_checkbox');
   itemCheckboxes.forEach(function(itemCheckbox){
       itemCheckbox.onchange = function() {
               updatePrice();
       }
   });
   let pluses = document.querySelectorAll('.num_plus');
   pluses.forEach(function(plus){
       plus.onclick = function(event){
           let num = plus.parentElement.querySelector('.num').value;
            plus.parentElement.querySelector('.num').value = parseInt(num) + 1; 
            updatePrice();
         };
    });
    let minuses = document.querySelectorAll('.num_minus');
   minuses.forEach(function(minus){
       minus.onclick = function(event){
           let num = minus.parentElement.querySelector('.num').value;
           if(parseInt(num) > 1){
                minus.parentElement.querySelector('.num').value = parseInt(num) - 1;
                updatePrice(); 
            }
         };
    });
}