购物车

样式css

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .all {
                width: 1000px;
                margin: 100px auto;
            }
            
            .main {
                border: 1px solid powderblue;
            }
            
            ul {
                list-style-type: none;
            }
            
            ul li {
                display: inline-block;
                width: 105px;
                height: 70px;
                text-align: center;
            
            }
            /*.img{
                position: absolute;
                display: inline-block;
                margin-top: 10px;
            }*/
            .one {
                width: 130px;
                height: 90px;
            }
            
            .one img {
                border: 1px solid white;
                margin-bottom: -47px;
                margin-left: 10px;
            }
            
            .one input {
                margin: 10px;
            }
            
            .two {
                width: 400px;
                height: 70px;
                
                margin-bottom: -27px;
                text-align: left;
            }
            
        
            
            input[name=number] {
                width: 30px;
            }
            
            .size {
                width: 20px;
                height: 20px;
            }
            
            .bottom {
                width: 1000px;
                height: 40px;
                background-color: gainsboro;
                margin-top: 10px;
                line-height: 40px;
            }
            
            .bottom div {
                display: inline-block;
                /*border: 1px solid seagreen;*/
                margin-right: 20px;
            }
            .check{
                float: right;
                
                
            }
            
            .totalMoney{
                float: right;
            }
            .goods{
                float: right;
                
            }
            .check button{
                width: 100px;
                height: 40px;
                background-color: gray ;
                color: white;
                margin-right:-20px;
            }
            .money,.count{
                color: orangered;
            }
        </style>

页面html布局

<div class="all">
            <ul>
                <li class="one"><input type="checkbox" name="fullChoose" onclick="fullChoose(this)" />全选</li>
                <li class="two">商品信息</li>
                <li>单价</li>
                <li>数量</li>
                <li>金额</li>
                <li>操作</li>
            </ul>
            <!--<ul>
                <li><input type="checkbox" /></li>
            </ul>-->
            <div class="main">
                <ul>
                    <li class="one"><input type="checkbox" name="eachChoose" onclick="choose()" /><img src="../img/fruit1.jpg" /></li>
                    <li class="two"><span>【天猫超市】龙眼</span>
                        <!--<div class="img"><img src="../img/2.png" /><img src="../img/1.png"/><img src="../img/3.png" /></div>-->
                    </li>
                    <li><span>￥29.90</span></li>
                    <li><button class="size" onclick="subNum(this)">-</button><input type="text" name="number" value="1" onchange="chooseNum(this)" /><button class="size" onclick="addNum(this)"> + </button></li>
                    <li><span>￥29.90</span></li>
                    <li><button onclick="deleteOne(this)">删除</button></li>
                </ul>
                <ul>
                    <li class="one"><input type="checkbox" name="eachChoose" onclick="choose()" /><img src="../img/fruit2.jpg" /></li>
                    <li class="two"><span>【天猫超市】火龙果</span></li>
                    <li><span>￥19.90</span></li>
                    <li><button class="size" onclick="subNum(this)">-</button><input type="text" name="number" value="1" onchange="chooseNum(this)" /><button class="size" onclick="addNum(this)"> + </button></li>
                    <li><span>￥19.90</span></li>
                    <li><button onclick="deleteOne(this)">删除</button></li>
                </ul>
                <ul>
                    <li class="one"><input type="checkbox" name="eachChoose" onclick="choose()" /><img src="../img/fruit3.jpg" /></li>
                    <li class="two"><span>【天猫超市】樱桃</span></li>
                    <li><span>￥19.90</span></li>
                    <li><button class="size" onclick="subNum(this)">-</button><input type="text" name="number" value="1" onchange="chooseNum(this)" /><button class="size" onclick="addNum(this)"> + </button></li>
                    <li><span>￥19.90</span></li>
                    <li><button onclick="deleteOne(this)">删除</button></li>
                </ul>
                <ul>
                    <li class="one"><input type="checkbox" name="eachChoose" onclick="choose()" /><img src="../img/fruit4.jpg" /></li>
                    <li class="two"><span>【天猫超市】哈密瓜</span></li>
                    <li><span>￥19.90</span></li>
                    <li><button class="size" onclick="subNum(this)">-</button><input type="text" name="number" value="1" onchange="chooseNum(this)"  /><button class="size" onclick="addNum(this)"> + </button></li>
                    <li><span>￥19.90</span></li>
                    <li><button onclick="deleteOne(this)">删除</button></li>
                </ul>
            </div>
            <div class="bottom">
                <div><input type="checkbox" name="fullChoose" onclick="fullChoose(this)" />全选</div>
                <div onclick="deleteChoose()">删除</div>
                <div>移入收藏夹</div>
                <div class="check"><button onclick="comfirmOrders() ">买单</button></div>
                
                <div class="totalMoney">计算总金额：
                    <div class="money">0.00</div>
                </div>
                <div class="goods">已选商品
                    <div class="count">0</div>件</div>

            </div>
        </div>
        <script type="text/javascript" src="../js/shopCar1.js"></script>

js代码    (名称：shopCar1.js)

function addNum(obj) {
    var inputvalue = obj.previousElementSibling.value;
    var newNum = parseInt(inputvalue) + 1;
    obj.previousElementSibling.value = newNum;
    var span = obj.parentElement.previousElementSibling.getElementsByTagName("span")[0];
    var strNum = span.innerText.substring(1);
    var money = strNum * newNum;
    obj.parentElement.nextElementSibling.getElementsByTagName("span")[0].innerText = "￥" + money.toFixed(2);
    countNumMoney();
}

function subNum(obj) {
    var inputvalue = obj.nextElementSibling.value;
    if(parseInt(inputvalue) > 1) {
        var newNum = parseInt(inputvalue) - 1;
        obj.nextElementSibling.value = newNum;
        var span = obj.parentElement.previousElementSibling.getElementsByTagName("span")[0];
        var strNum = span.innerText.substring(1);
        var money = strNum * newNum;
        obj.parentElement.nextElementSibling.getElementsByTagName("span")[0].innerText = "￥" + money.toFixed(2);
    }
    countNumMoney();
}

function chooseNum(obj) {
    var inputvalue = obj.value;
    var span = obj.parentElement.previousElementSibling.getElementsByTagName("span")[0];
    var strNum = span.innerText.substring(1);
    var money = strNum * inputvalue;
    obj.parentElement.nextElementSibling.getElementsByTagName("span")[0].innerText = "￥" + money.toFixed(2);
}

function fullChoose(obj) {
    // 获取全选的checked:obj.checked
    //拿到每一个商品前面的input框
    var items = document.getElementsByName("eachChoose");
    //循环遍历每一个商品前面的选框
    for(var i = 0; i < items.length; i++) {
        // 一个一个的给checked赋值： 全选框的checked一样即可
        items[i].checked = obj.checked;
    }

    // 给每个全选赋值： obj.checked
    var fulls = document.getElementsByName("fullChoose");
    for(var j = 0; j < fulls.length; j++) {
        fulls[j].checked = obj.checked;
    }

    countNumMoney();
    isChoose();
}

function choose(obj) {
    var items = document.getElementsByName("eachChoose");
    var fulls = document.getElementsByName("fullChoose");
    var flag = true;
/*判断复选框是否全部选择*/
    for(var i = 0; i < items.length; i++) {
        if(!items[i].checked) {

            flag = false;
            break;
        }
    }

    for(var j = 0; j < fulls.length; j++) {
        fulls[j].checked = flag;
    }
    countNumMoney();
    isChoose();
}

function deleteOne(obj) {
    if(confirm("你是否要删除")) {
        var ul = obj.parentElement.parentElement;
        ul.remove(this.parentElement);
    }
    countNumMoney();
    isChoose();
}

function deleteChoose() {
    if(confirm("你是否要删除所选")) {
        var items = document.getElementsByName("eachChoose");
        for(var i = items.length - 1; i >= 0; i--) {
            if(items[i].checked) {
                var ul = items[i].parentElement.parentElement;
                ul.remove(this.parentElement);
            }
        }
    }
    countNumMoney();
    isChoose();
}

function countNumMoney() {
    var items = document.getElementsByName("eachChoose");
    var sumNum = 0;
    var moneyNum = 0.0;

    for(var i = 0; i < items.length; i++) {
        if(items[i].checked) {
            var ul = items[i].parentElement.parentElement;

            var numCell = ul.children[3];

            var strNum = numCell.getElementsByTagName("input")[0].value;
            sumNum += parseInt(strNum);
            var moneyCell = ul.children[4];
            var strMoney = moneyCell.getElementsByTagName("span")[0].innerText;
            moneyNum += parseFloat(strMoney.substring(1));
        }
    }
    document.getElementsByClassName("count")[0].innerText = sumNum;
    document.getElementsByClassName("money")[0].innerText = moneyNum.toFixed(2);
}

function comfirmOrders() {

    var items = document.getElementsByName("eachChoose");
    for(var i = 0; i < items.length; i++) {
        if(items[i].checked) {

            if(confirm("你确定是否提交订单")) {
                
            }
            break;
        }
    }
}

function isChoose() {
    var items = document.getElementsByName("eachChoose");
    for(var i = 0; i < items.length; i++) {
        if(items[i].checked) {
            document.getElementsByClassName("check")[0].children[0].style.backgroundColor = "orange";
            document.getElementsByClassName("check")[0].children[0].style.color="black";
            break;
            
        }
        if(!items[i].checked){
            document.getElementsByClassName("check")[0].children[0].style.backgroundColor = "gray";
            document.getElementsByClassName("check")[0].children[0].style.color="while";
        }
    }
}