JavaScript实现购物车

男娘i 2022-05-19 00:22 276阅读 0赞

![70][]

![70 1][]

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        .wrap\{  
            width: 800px;  
            margin: 0 auto;  
        \}  
        .box,\#box\{  
            width: 800px;  
            border: 2px solid green;  
            position: relative;  
            top: 0;  
            padding: 10px;  
        \}  
        .check,p,span,.num,.add,.minus\{  
        /\*    position: absolute;  
            left: 0;  
            top: 0;\*/  
            display: inline-block;  
        \}  
        img\{  
            width: 82px;  
            height: 82px;  
            display: inline-block;  
        \}  
        p\{  
            margin: 0 40px;  
            color: \#999999;  
        \}  
        .price \{  
            vertical-align: middle;  
            margin: 0 40px;  
            font-size: 20px;  
            color: red;  
        \}  
        .num\{  
            width: 20px;  
            height: 20px;  
            border:1px solid;  
            line-height: 20px;  
            text-align: center;  
            margin-left: 40px;  
        \}  
        \#selecteAll,\#dele,\#move,\#product,\#proNum,\#textP,\#totalPri\{  
            display: inline-block;  
            color: \#666666;  
            font-size: 16px;  
            margin: 15px;  
        \}  
        \#proNum,\#totalPri,\#textP\{  
            margin:15px 0px;  
        \}  
        \#product\{  
            margin-right: 0px;  
        \}  
        \#accounts\{  
            display: block;  
            float: right;  
            margin-top: 40px;  
        \}  
        \#box::after\{  
            content: "";  
            display: block;  
            clear: both;  
        \}  
        \#over\{  
            margin-left: 30px;  
        \}  
    </style>  
</head>  
<body>  
      
    <div class="wrap">  
          
        <div id="box">  
            <input type="checkbox" id="selecteAll">全选  
            <span id="dele">删除选中商品</span>  
            <span id="move">移动到我的关注</span>  
            <span id="product">一共选中</span>  
            <span id="proNum">件商品</span>  
            <span id="textP">,总价格为(不含运费)$</span>  
            <span id="totalPri">元</span>  
            <input type="button" value="结算" id="over">  
        </div>  
    </div>  
</body>  
<script>  
    //获取变量  
    var wrap = document.querySelector(".wrap");  
    var box = document.querySelector(".box");  
    var img = document.querySelector("img");  
    // for循环生成下面产品  
    for(var i = 1 ; i < 6 ; i++)\{  
        list();  
        // 调用函数  
    \}  
    // 创建列表函数  
    function list()\{  
        var count = 0;  
        // 创建大盒子  
        var box = document.createElement("div");  
        box.className = "box";  
        // 创建勾选  
        var check = document.createElement("input");  
        check.className = "check";  
        // 为选框设置点击事件  
        check.onclick = function()\{  
            if (check.checked == true) \{  
                count = 1;  
                num.innerHTML = count;  
            \}else\{  
                count=0;  
                num.innerHTML = count;  
            \}  
        \}  
        // 设置type类型  
        check.setAttribute("type","checkbox");  
        // 创建图片  
        var imgs = document.createElement("img");  
        imgs.src = "img/img"+i+".png";  
        // 创建文本  
        var text = document.createElement("p");  
        text.innerHTML = "绿色认证好蔬菜";  
        // 创建价格  
        var price = document.createElement("span");  
        price.innerHTML = "20.00"  
        price.className = "price";  
        // 创建数量  
        var num = document.createElement("div");  
        num.className = "num";  
        num.innerHTML = count;  
        // 创建+按钮  
        var add = document.createElement("input");  
        add.setAttribute("type","button");  
        add.className = "add";  
        add.value = "+";  
        // 在每次生成的box中调用add点击事件  
        add.onclick = function()\{  
            // 当点击add时check会选中  
            check.checked = true;  
            count+=1;  
            console.log(count);  
            num.innerHTML = count;  
        \}  
        // 创建-按钮  
        var minus = document.createElement("input");  
        minus.setAttribute("type","button");  
        minus.className = "minus"  
        minus.value = "-";  
        // 在每次生成的box中调用minus的点击事件  
        minus.onclick = function()\{  
            if (count > 0 ) \{  
                count--;  
                console.log(count);  
                num.innerHTML = count;  
                  
            \}else\{  
                check.checked = false;  
                count = 0;  
                num.innerHTML = count;  
                console.log(count);  
            \}  
        \}  
        // 将所有创建标签写入wrap中  
        wrap.appendChild(box);  
        box.appendChild(check);  
        box.appendChild(imgs);  
        box.appendChild(text);  
        box.appendChild(price);  
        box.appendChild(num);  
        box.appendChild(add);  
        box.appendChild(minus);  
    \}  
    // 结算行设置  
    // 获取变量  
    var chek = document.querySelectorAll(".check");  
    var number = document.querySelectorAll(".num");  
    var pri = document.querySelectorAll(".price");  
    // 点击全选  
    selecteAll.onclick = function()\{  
        if (selecteAll.checked) \{  
            for(var i = 0;i < chek.length;i++)\{  
            var count = 0;  
            chek\[i\].checked = true;  
            count = 1;  
            number\[i\].innerHTML = count;  
            \}  
        \}  
    \}  
    // 点击删除  
    dele.onclick = function()\{  
        for(var i = 0 ; i < chek.length ; i++)\{  
            var count = 0  
            number\[i\].innerHTML = count;  
            chek\[i\].checked = false;  
            selecteAll.checked = false;  
        \}   
    \}  
    // 点击结算  
    over.onclick = function()\{  
            var proNums = 0;  
            var total = 0;  
            console.log(111);  
        for(var i = 0 ; i < 5 ; i++)\{  
            // console.log(111);  
            console.log(chek\[i\]);  
            if (chek\[i\].checked) \{  
                // 数量  
                console.log(111);  
                console.log(number\[i\].innerHTML);  
                proNums += Number(number\[i\].innerHTML);  
                total += Number(pri\[i\].innerHTML)\*Number(number\[i\].innerHTML);  
            \}  
        \}  
        proNum.innerHTML = proNums+"件商品" ;  
        totalPri.innerHTML = total+"元";  
    \}  
</script>  
</html>

[70]: /images/20220519/56ff852e1beb458f849459af281a3aa1.png
[70 1]: /images/20220519/0ba57732319648328e44c30b1cd7e5c8.png