JS DOM实现简易购物车

素材链接如下:https://wwgr.lanzouw.com/iARlN1hnak1i

body部分如下:

<body>
		<div  class="container">
            <h3>购物车管理</h3>
            <hr size="2px" color="#ababab"/>
		    <div id="shopping">
                <table>
                    <tr>
                        <td><img class="goods" src="images/1.jpg">
                            <button onclick="addGood(1)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/2.jpg">
                            <button onclick="addGood(2)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/3.jpg">
                            <button onclick="addGood(3)">加入购物车</button>
                        </td>
                    </tr>
                </table>
            </div>    
            <hr size="2px" color="#ababab"/>
            <h4>我的购物车</h4>
            <button onclick="clearAll()">清空购物车</button>
            <div id="my">
                购物车中尚无商品。
            </div>
                
		       
		</div>
</body>

效果如下:

注意,有两个函数,Button加入购物车 addGood(n),清空购物车 clearAll()

js代码如下:


<script>
    var myCart = document.getElementById("my");
    var goodTable = document.createElement("table");
    var count =[0,0,0];
    function addGood(n){ // 添加
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){ // 初始化购物车栏
            myCart.innerHTML="";
            myCart.appendChild(goodTable);
        }
        if(count[n-1]==0){ // 第一次添加
            var good = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            good.setAttribute("id","good"+n);
            td1.innerHTML=
               '<img src="images/'+n+'.jpg" />';
            td2.innerHTML='共<input type="number" value="1" id="num'+n+'"/>件';
            td3.innerHTML = '<input type="button" value="删除" onclick="reduce('+n+')" />';//id=" btn'+n+'"
            good.appendChild(td1);
            good.appendChild(td2);
            good.appendChild(td3);
            goodTable.appendChild(good);
        }
        else{ //多次添加
            var idTd =  "num"+n;
            var tdVar = document.getElementById(idTd);
            tdVar.value = parseInt(tdVar.value)+1;
        }
        count[n-1] = 1;
    }
    function clearAll(){ // 清空
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){alert("当前购物车没有商品");}
        else{
            goodTable.innerHTML="";
            myCart.removeChild(goodTable);
            goodTable.innerHTML="";
            myCart.innerHTML="购物车中尚无商品。";
            count = [0,0,0];
       }
    }
    function reduce(n){ // 减少
        var tdVar = document.getElementById("num"+n);
        var goodVar = document.getElementById("good"+n);
        var num = parseInt(tdVar.value);
        if(num-1==0){ // 最后一个直接删除行
            goodTable.removeChild(goodVar);
            count[n-1] = 0;
        }else{
            tdVar.value = parseInt(tdVar.value)-1;
        }
    }
</script>

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业5</title>
    <!-- <link href="css/1.css"/> -->
</head>
<body>
		<div  class="container">
            <h3>购物车管理</h3>
            <hr size="2px" color="#ababab"/>
		    <div id="shopping">
                <table>
                    <tr>
                        <td><img class="goods" src="images/1.jpg">
                            <button onclick="addGood(1)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/2.jpg">
                            <button onclick="addGood(2)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/3.jpg">
                            <button onclick="addGood(3)">加入购物车</button>
                        </td>
                    </tr>
                </table>
            </div>    
            <hr size="2px" color="#ababab"/>
            <h4>我的购物车</h4>
            <button onclick="clearAll()">清空购物车</button>
            <div id="my">
                购物车中尚无商品。
            </div>
                
		       
		</div>
</body>

<script>
    var myCart = document.getElementById("my");
    var goodTable = document.createElement("table");
    var count =[0,0,0];
    function addGood(n){ // 添加
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){ // 初始化购物车栏
            myCart.innerHTML="";
            myCart.appendChild(goodTable);
        }
        if(count[n-1]==0){ // 第一次添加
            var good = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            good.setAttribute("id","good"+n);
            td1.innerHTML=
               '<img src="images/'+n+'.jpg" />';
            td2.innerHTML='共<input type="number" value="1" id="num'+n+'"/>件';
            td3.innerHTML = '<input type="button" value="删除" onclick="reduce('+n+')" />';//id=" btn'+n+'"
            good.appendChild(td1);
            good.appendChild(td2);
            good.appendChild(td3);
            goodTable.appendChild(good);
        }
        else{ //多次添加
            var idTd =  "num"+n;
            var tdVar = document.getElementById(idTd);
            tdVar.value = parseInt(tdVar.value)+1;
        }
        count[n-1] = 1;
    }
    function clearAll(){ // 清空
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){alert("当前购物车没有商品");}
        else{
            goodTable.innerHTML="";
            myCart.removeChild(goodTable);
            goodTable.innerHTML="";
            myCart.innerHTML="购物车中尚无商品。";
            count = [0,0,0];
       }
    }
    function reduce(n){ // 减少
        var tdVar = document.getElementById("num"+n);
        var goodVar = document.getElementById("good"+n);
        var num = parseInt(tdVar.value);
        if(num-1==0){ // 最后一个直接删除行
            goodTable.removeChild(goodVar);
            count[n-1] = 0;
        }else{
            tdVar.value = parseInt(tdVar.value)-1;
        }
    }
</script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值