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

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

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

2.dog.jpg

3.mai.jpg

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