导航：首页 > 开发技术 >

JavaScript如何实现购物车怎么

发表于：2024-09-25 作者：千家信息网编辑

千家信息网最后更新 2024年09月25日，这篇文章主要介绍了JavaScript如何实现购物车怎么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下HTML结构

千家信息网最后更新 2024年09月25日JavaScript如何实现购物车怎么

这篇文章主要介绍了JavaScript如何实现购物车怎么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

HTML结构

                Document                                                                            全选            
             
            商品名称
            单价
            数量
            小计
            操作
        
                                                                                                                        
                                                                
                    8848 移动版 4GB+64GB 千峰蓝
                    8888元
                                                                        -                                                        +                        
                    
                    8888元
                    删除
                
                                                                                
                                                                
                    8848 移动版 4GB+64GB 千峰蓝
                    8888元
                                                                        -                                                        +                        
                    
                    8888元
                    删除
                
                                                                                
                                                                
                    8848 移动版 4GB+64GB 千峰蓝
                    8888元
                                                                        -                                                        +                        
                    
                    8888元
                    删除
                
                                                                                
                                                                
                    8848 移动版 4GB+64GB 千峰蓝
                    8888元
                                                                        -                                                        +                        
                    
                    8888元
                    删除
                
            
        
                                            继续购物                已选择 0 件商品            
            去结算
            合计： 0元

css结构

/* 浏览器和标签都有默认的样式 清除默认样式 */*{    margin: 0;padding: 0}/* 清除加粗标签的默认样式 */b,strong{    font-weight: normal}/* 清除倾斜标签的默认样式 */i,em{    font-style: normal}/* 清除默认下划线 */a,u{    text-decoration: none}/* 超链接默认颜色为黑色 */a{    color: #000;}/* 清除列表的默认符号样式 */ul,ol,li{    list-style: none}/* 左浮动 */.u-l{    float: left;}/* 右浮动 */.u-r{    float: right;}/* 清除浮动 */.clearfix{    clear: both;}

.cart{    margin:0 auto;    width: 1200px;} /* 购物车头部样式 */.cart-head{    height: 70px;    line-height: 70px;}.col{    width: 120px; }.col-img img{    width: 100px;    height: 100px;}.col-name{    width: 380px;}.col-price{    width: 160px;    padding-right: 18px;}.col-num{    width: 150px;    text-align: center;}.col-sum{    text-align: center;    color: #ff6700;}.col-active{    text-align: center;} /* 购物车商品样式 */.item-box{    overflow: hidden;    padding: 20px 0;    border-top: 1px solid #ccc;} .change-goods-num{    width: 148px;    height: 38px;    border: 1px solid #000;}.change-goods-num a{    float: left;    width: 38px;    height: 38px;    line-height: 38px;    font-size: 20px;    color: #000;    text-align: center;}.change-goods-num input{    float: left;    width: 72px;    height: 38px;    font-size: 18px;    line-height: 38px;    text-align: center;    border-width: 0;} /* 底部 */.cart-foot{    height: 50px;    line-height: 50px;    border: 1px solid #ccc;    }.section-left a{    margin-left: 32px;    color: #757575;}.section-left span{    margin-left: 16px;    padding-left: 16px;    color: #757575;    border-left: 1px solid #ccc;}.section-left i{    color: #ff6700;}.settlement{    margin-left: 40px;    padding:0 40px ;    font-size: 18px;    background-color: orange;    color: #fff; }.total-price{    color: #ff6700;}.total-price em{    font-size: 30px; }

js结构

//获取到页面中所有复选框checkvar check = document.querySelectorAll('.check');console.log(check.length);//获取到商品栏复选框var single = document.querySelectorAll('.single');console.log(single.length);//获取每一行商品栏var itemBox = document.querySelectorAll('.item-box');console.log(itemBox); for(var i=0;i感谢你能够认真阅读完这篇文章，希望小编分享的"JavaScript如何实现购物车怎么"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!

很赞哦！