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

用html做一个购物车,能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。,第1张

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>    

<!--<tr class="cart-good">-->    

<!--<td><input type="checkbox" id="001"></td>-->    

<!--<td>-->    

<!--<img src="https://p2.jmstatic.com/product/001/293/1293263_std/1293263_60_60.jpg" alt="">-->    

<!--<p>[极速免税]PITTA MASK 口罩3枚入</p>-->    

<!--<p>型号:新版防晒款  容量:3枚入</p>-->    

<!--</td>-->    

<!--<td>89.00</td>-->    

<!--<td>-->    

<!--<input type="button" value="-">-->    

<!--<input type="text" value="1">-->    

<!--<input type="button" value="+">-->    

<!--</td>-->    

<!--<td>89.00</td>-->    

<!--<td><a href="#">删除</a></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_products= [

        {

            "id":"002",

            "title": "Estee Lauder 多效智妍精华霜15ml",

            "img_url": "http://p0.jmstatic.com/product/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/product/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/product/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/product/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/product/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/product/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_products){

            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_products){

                good.ischecked=f

            }

        }else if(node.nodeName.toLowerCase()=='a'){

            var tr=event.target.parentNode.parentNode

            for(var i=0i<skin_products.lengthi++){

                if(skin_products[i].id==tr.id){

                    skin_products.splice(i,1)

                    console.log(skin_products)

                }

            }

            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_products){

            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_products){

        //     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_products){

                    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>

登录状态下的淘宝购物车最多能添加120种商品,游客(未登录/未注册)状态下最多只能添加20种商品,合并支付笔数以购物车上限为准。

1、购物车的商品总数包括失效的宝贝,即已不能购买的宝贝。

2、呈现灰色的宝贝为失效的宝贝,说明商品已被下架、删除、库存不足、商家处理被监管或冻结状态,不可以再购买,建议您删除,删除之后,又可以多放几件宝贝。

3、若您在购物车已满时看到心仪的宝贝,可以先放入收藏夹,等购物车里的宝贝结算完之后,购物车有空余了,再加入购物车进行购买。

扩展资料:

查看购物车方式:

1、每次将宝贝成功加入到购物车时,可以在跳出的页面点击“去购物车结算”按钮后查看。

2、点击网站页面最上方的“购物车”。

3、点击“我的淘宝”—“我的首页”—“我的购物车”。

参考资料来源:淘宝官网-购物车最多可以放多少件商品


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6186373.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存