JavaScript实现购物车案例

2024-04-02 19:04:59 528人浏览泡泡鱼

摘要

本文实例为大家分享了javascript实现购物车功能的具体代码，供大家参考，具体内容如下 HTML结构 <!DOCTYPE html> <html lang="

本文实例为大家分享了javascript实现购物车功能的具体代码，供大家参考，具体内容如下

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="./CSS/02-reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 简单写个大盒子分大三栏 -->
    <div class="cart">
        <!-- 购物车头部 -->
        <div class="cart-head clearfix">
            <div class="col col-check u-l">
                <input type="checkbox" id="all" class="check">
                <label for="all">全选</label>
            </div>
            <div class="col col-img u-l">&nbsp;</div>
            <div class="col col-name u-l">商品名称</div>
            <div class="col col-price u-l">单价</div>
            <div class="col col-num u-l">数量</div>
            <div class="col col-sum u-l">小计</div>
            <div class="col col-action u-r">操作</div>
        </div>
        <!-- 购物车列表 -->
        <div class="cart-list">
            <!-- 商品块 -->
            <div class="list-item">
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-Goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text" value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text " value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text" value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text" value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        <div class="cart-foot">
            <div class="section-left u-l">
                <a href="">继续购物</a>
                <span>已选择 <i id="totalNum">0</i> 件商品</span>
            </div>
            <div class="u-r settlement">去结算</div>
            <div class="u-r total-price">合计： <em id="totalPrice">0</em>元</div>
        </div>
    </div>
 
    <script type="text/javascript" src="./js/script.js"></script>
</body>
</html>

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结构

//获取到页面中所有复选框check
var 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<check.length;i++){
    //给所有复选框添加事件
    check[i].onclick = function(e){
        //判断是否全选
        var count = 0;
        //判断全选框
        if(e.target.getAttribute('id') == 'all'){
            //把全选状态赋值给每一个checkbox
            for(j=0;j<single.length;j++){
                single[j].checked = this.checked
            }
        }
        for(var k = 0; k<single.length;k++){
            if(single[k].checked){
                count++;
            }
            if( count == single.length){
                check[0].checked = true; 
            }else{
                check[0].checked = false;
            }
        }
 
        fTotal();
    }
}
//给商品每一行添加事件
for(var i = 0;i<itemBox.length;i++){
    itemBox[i].onclick = function(e){
 
        var input = this.getElementsByTagName('input')[1];
 
        switch(e.target.className){
            case 'jiahao':
                // alert('加');
                input.value = parseInt(input.value)+1;
                fTotalSum(this);
            break;
            case 'jianhao':
                // alert('减');
                input.value = parseInt(input.value)-1 <=1 ? 1:parseInt(input.value)-1;
                fTotalSum(this);
            break;
            case 'col col-action u-r':
                var con = confirm('确定删除吗？');
                if( con ){
                    this.parentnode.removeChild(this);
                }
                break;
        }
        //调用 计算总数量和总价
        fTotal()
    }   
}
// 定义一个函数计算 小计 That === this 就是商品每一行
function fTotalSum(That){
 
    //获取当前行的数量
    var num = That.getElementsByTagName('input')[1].value;
    //获取当前行的单价  取整是为了省略掉'元'字符串，方便计算
    var price = parseInt(That.querySelector('.col-price').innerHTML);
    // 最终小计值为数量乘以单价
    That.querySelector('.col-sum').innerHTML = num * price+'元';
};
//定义一个函数 方便调用总数量  和 合计
function fTotal(){
    //获取到总价节点
    var totalPrice = document.getElementById('totalPrice');
    //总价
    var price = 0;
    //获取到总件节点
    var totalNum = document.getElementById('totalNum');
    //数量总和
    var Num = 0;
    //获取每一行商品盒子
    var itemBox = document.querySelectorAll('.item-box');
 
    for(var i = 0; i<itemBox.length;i++){
        itemBox[i].getElementsByTagName('input')[1].value;
        //选中了，才拿数量和价格
        if( itemBox[i].getElementsByTagName('input')[0].checked ){
           Num += parseInt(itemBox[i].getElementsByTagName('input')[1].value);
           price += parseInt(itemBox[i].querySelector('.col-sum').innerHTML);
        }
        
    }
    //合并把总和数量写到标签里
    totalNum.innerHTML = Num;
    totalPrice.innerHTML = price;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实现购物车案例

本文链接: https://www.lsjlt.com/news/162379.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341