删除当当购物车商品javascript 当当购物车 js实战简易javascript项目 js作业

╰+哭是因爲堅強的太久メ 2024-03-30 09:32 42阅读 0赞

废话不多说，直接上代码。

**CSS文件：cartStyle.css**

body,ul,li,div,p,h1,h2,ol{margin:0;padding: 0;}
    body{margin: 5px 0 0 0}
    ul,li,ol{list-style: none;}
    .content{width: 680px; margin: 0 auto;  font-family: "微软雅黑"; border: solid 1px #cecece; padding: 5px;}
    .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{
        overflow: hidden;
    }
    .cartList ul{
        clear: both;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px #c6c6c6 dashed;
        padding-top: 6px;
    }
    .cartList ul li img{width: 60px;
    }
    .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:nth-of-type(4){width: 100px;}
    .cartList ul li:nth-of-type(5){width: 130px;}
    .cartList ul li p{cursor: pointer;}
    .cartList ol{
        float: right;
        clear: both;
    }
    .cartList ol li{
        float: left;
        width: 200px;
    }
    .cartList ol li:nth-of-type(1) span{
        color: #ff0000;
    }
    .cartList ol li:nth-of-type(2) 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;}

**js文件：shopping.js**

/*关闭窗口*/
    function closeMe(){
        window.close();
    }
    function collection(){
        var flag=confirm("移入收藏后，将不再购物车显示，是否继续操作?");
        if(flag==true){
            alert("移入收藏成功!");
        }
    }
    function del(thisObj){
        var flag=confirm("您确定要删除商品吗?");
        if(flag==true){
            //要删除特定书本对应的UL
            var delUL = thisObj.parentNode.parentNode;
            //找到UL对应的父节点，由父节点进行删除操作
            delUL.parentNode.removeChild(delUL);
            alert("删除成功!");
            //重新商品总计
            total();
        }
    }
    function account(){
        // var flag=confirm("您本次购买的商品信息如下：\n\n商品名称：白岩松：白说、岛上书店；\n商品数量：2件；\n商品总计：46.00；\n运费：0元；\n\n请确认以上信息是否有误！！！");
        // if(flag){
        //     alert("您的订单已提交");
        // }
        //获得两本书的分别价格，及总商品价格，显示在ID为info的div中
        //第一本书的价格：第一本书UL中的倒数第二个LI
        var ul = document.getElementById("cartList").firstElementChild.nextElementSibling;
        var num1 = ul.lastElementChild.previousElementSibling.innerHTML;
        //第二本书的价格：第二本书UL中的倒数第二个LI
        var num2 = ul.nextElementSibling.lastElementChild.previousElementSibling.innerHTML;
        //总价格：ID为cartList的div中的最后一个元素节点ol里面的第一个li
        var total = document.getElementById("cartList").lastElementChild.firstElementChild.innerHTML;
        //提示信息
        var str = "您本次购买的商品信息如下：<br/>我的狗狗活下来了："+num1+"<br/>灰霾来了："+num2+"<br/>"+total;
        //将提示信息显示在ID为info的div中
        document.getElementById("info").innerHTML = str;
    }
    //计算购物车商品总金额
    function total(){
        //分别拿到所有商品的单价及数量
        var prices = document.getElementsByName("price");
        var amounts = document.getElementsByName("amount");
        //总金额
        var sum = 0;
        for(var i=0;i<prices.length;i++){
            sum+=prices[i].value*amounts[i].value;
        }
        //将总金额显示在正确位置上<li id="totalPrice">商品总计：<span></span></li>>
        document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML="￥"+sum;
    }
    total();
    //商品数量增加的操作  index：哪一个account修改,集合中的哪一个商品元素（单价、数量对应的下标）
    function plus(index){
        //1 改变每个商品增加数量后的新数量
        //拿到商品数量原来的值
        var count = parseInt(document.getElementsByName("amount")[index].value);
        //让商品数量原来的值+1
        //让商品数量变为+1以后的新的数量值
        document.getElementsByName("amount")[index].value=count+1;
        //2 修改数量后每个商品的总金额要相应修改
        var totalPer = parseFloat(document.getElementsByName("price")[index].value*(count+1));
        document.getElementById("totalprice"+index).innerHTML = "￥"+totalPer;
        //3 所有商品的总金额也要相应修改
        total();
    }
    //商品数量减少的操作  index：哪一个account修改,集合中的哪一个商品元素（单价、数量对应的下标）
    function minus(index){
        //1 改变每个商品减少数量后的新数量
        //拿到商品数量原来的值
        var count = parseInt(document.getElementsByName("amount")[index].value);
        if(count==1){
            //对商品数量做一个判断，当当前商品数量已经=1的情况下，不能再减少了
            alert("不能再减少了，再减就没有啦！");
        }else{
            //让商品数量原来的值-1
            //让商品数量变为-1以后的新的数量值
            document.getElementsByName("amount")[index].value=count-1;
            //2 修改数量后每个商品的总金额要相应修改
            var totalPer = parseFloat(document.getElementsByName("price")[index].value*(count-1));
            document.getElementById("totalprice"+index).innerHTML = "￥"+totalPer;
            //3 所有商品的总金额也要相应修改
            total();
        }
    }

**html文件：shopping.html**

<!DOCTYPE html>
    <html>
    <head lang="zh">
        <meta charset="UTF-8">
        <title>当当购物车删除商品</title>
        <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
    </head>
    <body>
    
    <div class="content">
        <div class="logo">
            <img src="images/dd_logo.jpg"><span onclick="closeMe()">关闭</span>
        </div>
        <div class="cartList" id="cartList">
            <ul>
                <li>商品图片</li>
                <li>商品信息</li>
                <li>单价</li>
                <li>数量</li>
                <li>总价</li>
                <li>操作</li>
            </ul>
            <ul>
                <li><img src="images/dog.jpg"></li>
                <li>我和狗狗活下来了</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="totalprice0">¥21.90</li>
                <li><p onclick="collection();">移入收藏</p><p onclick="del(this)">删除</p></li>
            </ul>
            <ul>
                <li><img src="images/mai.jpg"></li>
                <li>灰霾来了怎么办</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="totalprice1">¥24.00</li>
                <li><p  onclick="collection()">移入收藏</p><p onclick="del(this)">删除</p></li>
            </ul>
            <ol>
                <li id="totalPrice">商品总计：<span></span></li>
                <li><span onclick="account()">结 算</span></li>
            </ol>
        </div>
        <div id="info"></div>
    </div>
    <script type="text/javascript" src="js/shopping.js"></script>
    </body>
    </html>

**html中的图片在这：**

1.dd\_logo.jpg

![416fe9218a834e499ec678d922f16db8.jpeg][]

2.dog.jpg

![c6988b3a732241d4b11bbc4674a0fe9b.jpeg][]

3.mai.jpg

![117b5ca2ea1e4a0da01a9334ac81932d.jpeg][]

**无水印的原图片在评论区！！**

[416fe9218a834e499ec678d922f16db8.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a2233f20c28149b585e42bbba56fb478.jpeg
[c6988b3a732241d4b11bbc4674a0fe9b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/798c10db95ec45ba9a836bbfef36e896.jpeg
[117b5ca2ea1e4a0da01a9334ac81932d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/69074bdaf6dd4ade9b05ee1511bc796c.jpeg