Js实现购物车加减，价格计算等功能

谁借莪１个温暖的怀抱￠ 2023-06-07 10:58 30阅读 0赞

### 需求说明： ###

1、单击“半闭”按钮时，关闭当前页面购物车页面  
2、单击“移入收藏”弹出收藏提示  
3、单击“删除”弹出确认删除提示  
4、单击“结算”按钮，弹出结算信息页面窗口  
5、自动计算商品总计  
6、单击“删除”按钮，使用parentNode访问当前节点的父亲节点等，使用removeChild( )删除当前商品

### 效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

### 代码： ###

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>完善当当购物车页面</title>
        <style type="text/css">
        	body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
    ul,li,ol{list-style: none;}
    .content{width: 810px; margin: 0 auto;  font-family: "微软雅黑";}
    .logo{margin: 10px 0;}
    .logo span{
        display: inline-block;
        float: right;
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background: #ff0000;
        color: #ffffff;
        text-align: center;
        border-radius: 10px;
        margin-top: 5px;
        margin-right: 10px;
        cursor: pointer;
        font-weight: bold;
    }
    .cartList{
        /*background: url("../image/02.jpg") no-repeat;*/
        /*height: 414px;*/
        overflow: hidden;
    }
    .cartList ul{
        display: flex;
        justify-content: space-between;
        /*float: right;*/
        /*width: 450px;*/
    }
    .cartList ul:nth-of-type(1){
        display: flex;
        margin-top: 125px;
    }
    .cartList ul:nth-of-type(2){
        margin: 20px 0;
    }
    .cartList ul li{
        font-family: "微软雅黑";
        font-size: 12px;
        color: #666666;
        text-align: center;
        line-height: 25px;
        /*float: left;*/
    }
    .cartList ul li input[name="price"]{
        border: none;
        background: transparent;
        width: 45px;
        text-align: center;
    }
    .cartList ul li input[name="amount"]{
        width: 45px;
        text-align: center;
        border: 1px solid #999999;
        border-left: none;
        border-right: none;
        height: 21px;
    }
    .cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
        height: 25px;
        border: 1px #999999 solid;
        width: 25px;
        text-align: center;
    }
    .cartList ul li:nth-of-type(1){width: 130px;}
    .cartList ul li:nth-of-type(2){width: 100px;}
    .cartList ul li:nth-of-type(3){width: 130px;}
    .cartList ul li p{cursor: pointer;}
    .cartList ol{
        float: right;
        clear: both;
        margin-top: 40px;
    }
    .cartList ol li{
        float: left;
    }
    .cartList ol li:nth-of-type(1){
        color: #ff0000;
        width: 80px;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }
    .cartList ol li span{display: inline-block;
        float: right;
        width: 80px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        font-family: "微软雅黑";
        background: #ff0000;
        color: #ffffff;
        text-align: center;
        /*margin-top: 5px;*/
        /*margin-right: 15px;*/
        cursor: pointer;
        font-weight: bold;}
    
        </style>
    </head>
    
    
    <body onload="total()">
    
    <div class="content">
        <div class="logo">
            <span onclick="javascript:if (confirm('确认要关闭吗'))window.close() ">关闭</span>
        </div>
        <div class="cartList">
            <ul>
                <li>商品信息</li>
                <li>商品图片</li>
                <li>单价（元）</li>
                <li>数量</li>
                <li>金额（元）</li>
                <li>操作</li>
            </ul>
            <ul style="display: flex;justify-content: space-between;align-items: center" id="first">
                <li>《平凡的世界》</li>
                <li><img src="./img/1.png" alt="" width="50" height="50"></li>
                <li>¥<input type="text" name="price" value="21.90"></li>
                <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
                <li id="price0">¥21.90</li>
                <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
            </ul>
            <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
                <li>《昆虫记》</li>
                <li><img src="./img/2.png" alt="" width="50" height="50"></li>
                <li>¥<input type="text" name="price" value="24.00"></li>
                <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
                <li id="price1">¥24.00</li>
                <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
            </ul>
            <ol>
                <li id="totalPrice"> </li>
                <li><span>结算</span></li>
            </ol>
        </div>
    </div>
    </body>
    </html>
    
    <script>
        //减法
        function minus(index) {
            //获取当前数量的值
            var amounts=document.getElementsByName("amount");
    
            //得到第一个amount的元素的value属性的值
            var count=parseInt(amounts[index].value); //数量加1
    
            if (count<=1){
                alert("不能再减了，快没了！！");
            } else {
                //得到第一个amount的元素的value属性的值
                var count=parseInt(amounts[index].value)-1; //数量加1
    
                //重新把count的值绑定在数量文本框里
                amounts[index].value=count;
                var prices=document.getElementsByName("price");
                var price=parseFloat(prices[index].value);
                //乘以Math.pow(10,2)的原因为避免失真
                var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
    
                document.getElementById("price"+index).innerHTML="¥："+totalMoney;
            }
    
            total();
    
        }
    
        //加法
        function plus(index) {
    
            //获取当前数量的值
            var amounts=document.getElementsByName("amount");
    
            //得到第一个amount的元素的value属性的值
            var count=parseInt(amounts[index].value)+1; //数量加1
    
            //重新把count的值绑定在数量文本框里
            amounts[index].value=count;
    
            //当前操作端口的价格也要重新计算
            //得到当前端口的单价
            var prices=document.getElementsByName("price");
            var price=parseFloat(prices[index].value);
            //乘以Math.pow(10,2)的原因为避免失真
            var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
    
            //把当前价格显示在文本中
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
    
            total();
        }
    
    
        //求总金额
    
        function total() {
    
            //得到所有的数量
            var counts=document.getElementsByName("amount");
    
            //得到所有的单价
            var prices=document.getElementsByName("price");
    
            var sumMoney=0;
    
            for (var i=0;i<counts.length;i++){
    
                //乘以Math.pow(10,2)的原因为避免失真
                sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
            }
    
            //把总金额显示再指定的元素中
            document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
    
        }
    
    
        //加入收藏
        function save() {
            if (confirm("确认要收藏吗？")){
                alert("收藏成功！");
            }
    
        }
        //删除
        function delete1() {
            if (confirm("确认要删除吗？")) {
                var del=document.getElementById("first");
                del.parentNode.removeChild(del);
                alert("删除成功！！");
            }
        }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: /images/20230601/a8c63a0428aa4b25b0c12ea4b782af11.png