用html做一个购物车,能实现简单的产品数量和价格的加减就行。最后能...

发布网友发布时间：2022-04-26 16:53

共3个回答

热心网友时间：2022-04-19 06:50

html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax

纯前端的话可以参考下面的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cart</title>
<style type="text/css">
    body,p,a,input{
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.container{
    width: 100%;
}

.main{
    width: 1000px;
    height: 500px;

    margin:100px auto;
}

.main .cart-container table{
    width: 100%;

}

.main .cart-container table tr{
    text-align: center;

}

.main .cart-container table tr:hover{
    background: rgba(128, 128, 128, 0.2);
}
.main .cart-container table .table-header{
    height: 30px;
    background: #d9d9d9;

    font-size: 1.2em;

}

.main .cart-container table .table-header td:first-child{
    border-left: solid 4px red;
    box-sizing: border-box;
}

.main .cart-container table tr td:nth-child(1),
.main .cart-container table tr td:nth-child(2){
    text-align: left;

}

.main .cart-container table tr td:nth-child(2){
    width: 52%;
}
.main .cart-container table tr td:nth-child(3){
    width: 12%;
}
.main .cart-container table tr td:nth-child(4){
    width: 12%;
}
.main .cart-container table tr td:nth-child(5){
    width: 12%;
}
.main .cart-container table tr td:last-child{
    width: 10%;
}

.cart-good{

    height: 60px;
}
.cart-good img{
    float: left;
    margin: 10px;
    width: 60px;
}

.cart-good td p{
    margin: 10px 0px;
}

/*加、减按钮*/

.cart-good td input[type='button']{
     width: 20px;
     height: 20px;
     background: #00f300;
     outline: none;
     border: none;
}

.cart-good td input[type='button']:disabled{
    background: grey;
}

.cart-good td input[type='button']:first-child{
   margin-right: -4px;
}
.cart-good td input[type='button']:last-child{
    margin-left: -4px;
}
.cart-good td input[type='text']{
    width: 30px;
    height: 20px;
    outline: none;
    border: none;
    text-align: center;

}

.table-footer{
    display: flex;
    justify-content: space-between;
    line-height: 40px;
}

.table-footer div{
    font-size: 1.2em;

}
.table-footer div button{
    background: red;
    width: 120px;
    height: 40px;
    color: white;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<section class="main">
<div class="cart-container">
<table cellspacing="0">
<tr class="table-header">
<td><input type="checkbox" id="chk_alla"></td>
<td>聚美优品发货</td>
<td>聚美价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
















</table>
<div class="table-footer">
<div>
<input type="checkbox" id="chk_allb"> <label for="chk_allb">全选</label>
<span style="margin-left: 20px">继续购物 | 清空选中商品</span>
</div>
<div>
共 <span id="good_count">5</span>件商品    商品应付总额：<span id="goods_total">¥229.00</span>
<button class="btn_menu">去结算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function () {
    var skin_procts= [
        {
            "id":"002",
            "title": "Estee Lauder 多效智妍精华霜15ml",
            "img_url": "http://p0.jmstatic.com/proct/003/565/3565880_std/3565880_350_350.jpg",
            "price": 249.0,
            "number":6,
            "acount": "520",
            "ischecked":true
        },
        {
            "id":"004",
            "title": "EsteeLauder 肌透修护洁面乳30ml",
            "img_url": "http://p4.jmstatic.com/proct/003/155/3155764_std/3155764_350_350.jpg",
            "price": 49.9,
            "number":1,
            "acount": "5911",
            "ischecked":false
        },
        {
            "id":"008",
            "title": "雅诗兰黛无痕持妆粉底液",
            "img_url": "http://p3.jmstatic.com/proct/003/662/3662318_std/3662318_350_350.jpg",
            "price": 69.9,
            "number":2,
            "acount": "3972",
            "ischecked":true
        },
        {
            "id":"0012",
            "title": "Estee Lauder 肌初赋活原生液30ml",
            "img_url": "http://p4.jmstatic.com/proct/003/565/3565914_std/3565914_350_350.jpg",
            "price": 159.0,
            "number":1,
            "acount": "2338"
        },
        {
            "id":"001",
            "title": "雅诗兰黛无痕持妆粉底液30ml",
            "img_url": "http://p2.jmstatic.com/proct/001/648/1648502_std/1648502_350_350.jpg",
            "price": 298.0,
            "number":4,
            "acount": "5071",
            "ischecked":false
        },
        {
            "id":"009",
            "title": "雅诗兰黛眼部精华霜15ml",
            "img_url": "http://p1.jmstatic.com/proct/001/049/1049746_std/1049746_350_350.jpg",
            "price": 399.0,
            "number":1,
            "acount": "4022",
            "ischecked":false
        }
    ]

//    添加商品

    function load() {
        var tbody=document.querySelector('.cart-container table tbody');
        for(let good of skin_procts){
            tbody.innerHTML+=` <tr class="cart-good" id="${good.id}">
                            <td><input type="checkbox" class="good-check" ${good.ischecked?"checked":''}></td>
                            <td>

                                <img src="${good.img_url}" alt="">
                                <p>[极速免税]PITTA MASK 口罩3枚入</p>
                                <p>型号：新版防晒款  容量：3枚入</p>

                            </td>
                            <td>${good.price}</td>
                            <td>

                                <input type="button" value="-"  ${good.number<=1?"disabled":''}>
                                <input type="text" value="${good.number}">
                                <input type="button" value="+">
                            </td>
                            <td>${good.price*good.number}</td>
                            <td><a href="#">删除</a></td>
                        </tr>`
        }

        totalAcount();
    }
    load();
//    end all..........

    // 1. 为table注册单击事件

    var table01=document.querySelector('.cart-container table');

    table01.onclick=function (event) {

        var node=event.target
        if(node.getAttribute('type')=='button'){
            // alert(event.target.value);
            changeNumber(event);
            subtotal(event);
            checkedRow(event);
            checkedAllRows();

        }else if(node.className=='good-check'){
            checkedAllRows();

        }else if(node.id=='chk_alla'){
            var f=event.target.checked;
            var chks=document.querySelectorAll('.good-check');
            for(var ck of chks){
                ck.checked=f;
            }

            for(var good of skin_procts){
                good.ischecked=f;
            }

        }else if(node.nodeName.toLowerCase()=='a'){
            var tr=event.target.parentNode.parentNode;
            for(var i=0;i<skin_procts.length;i++){
                if(skin_procts[i].id==tr.id){
                    skin_procts.splice(i,1);
                    console.log(skin_procts);
                }
            }

            tr.parentNode.removeChild(tr);

        }
        totalAcount();
    };

    //单击增加或减少按钮的方法
    function changeNumber(event) {

        var node=event && event.target;
        var v=0;
        if(node.value && node.value=='+'){
            // node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
            node.previousElementSibling.value++;
            v=node.previousElementSibling.value;
            node.previousElementSibling.previousElementSibling.disabled=false;

        }else{
            // if(node.value && node.value=='+')
            if(node.nextElementSibling.value>1){
                node.nextElementSibling.value--;
                v=node.nextElementSibling.value;
                if(v==1){
                    node.disabled=true;
                }
            }
        }

    //    存储商品数量

        var id=node.parentNode.parentNode.id;

        for(var good of skin_procts){
            if(id==good.id){
                good.number=v;
            }
        }

    }

//    每个商品小计的方法

    function subtotal(event) {
        var node=event && event.target;

        // var id=node.parentNode.parentNode.id;

        // for(var g of skin_procts){
        //     if(g.id==id){
        //         alert(g.price);
        //     }
        // }

        // var price=；

        var price=node.parentNode.previousElementSibling.innerText;
        var num=node.parentNode.children[1].value;
        node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
    }

//    检验该商品是否选中
    function checkedRow(event) {
        event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
        // event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
        // var tbody=event.target.parentNode.parentNode.parentNode;
        // event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
    }
//   检查是否全选

    function checkedAllRows() {
        var chks=document.querySelectorAll('.good-check');
        var flag=true;
        for(var ck of chks){
            if(!ck.checked){
                flag=false;
                break;
            }
        }
        document.querySelector('#chk_alla').checked=flag;

    }

//    统计商品总量和总价格

    function totalAcount() {

        var total=0;
        var total_price=0;
        var chks=document.querySelectorAll('.good-check');
        for(var ck of chks){
            if(ck.checked){
                id=ck.parentNode.parentNode.id;
                for(var good of skin_procts){
                    if(id==good.id){
                        total+=~~good.number;
                        total_price=total_price+(good.number*good.price);
                        good.ischecked=true;

                    }
                }

            }
        }

        document.querySelector('#good_count').innerText=total;
        document.querySelector('#goods_total').innerText=total_price;

    }

})();
</script>
</body>
</html>

热心网友时间：2022-04-19 08:08

用js去实现

热心网友时间：2022-04-19 09:42

HTML只是前端计算给用户看看的，你可不能直接就把计算总和插进数据库里。服务器上还要重新算一边的追问要是不用链接数据库呢？就只是能计算一下总和呢？