js 购物车基本功能的实现

客官°小女子只卖身不卖艺 2021-10-23 12:30 323阅读 0赞

###### 先上一个效果图 ######

![在这里插入图片描述][20190814180158812.gif]

> 步骤：  
> ① 用js语句画页面（for循环创建四个元素）  
> ② 实现全选功能：当全选的`checked`为true时，所有元素被选中（包括`checked`为true和被背景变为粉色）。当全选的`checked`为flase时，所有元素不被选中。当点击全选按钮时，反选按钮取消选中  
> ③ 实现反选功能：当反选按钮被选中时，选中点击前未被选中的元素，并且全选按钮取消选中  
> ④ 实现单选功能：当有一个元素未被选中时，全选按钮取消选中  
> ⑤ 在`window.onload=function(){}`中对各个元素进行操作（不同浏览器可能会无法获取各个元素的相关属性值）  
> ⑥ 在实现对元素的操作时，采用的是索引对索引的方式。通过索引对元素的数量/价钱进行操作。  
> ⑦ 在实现对元素的数量的文本框输入的功能时，需要对输入的元素进行判断（在`onkeydown`事件中进行判断）：若输入的值为空时，在文本框失去焦点时，其`value`自动变为1。当输入的值为0时，在按完键后立刻变为1。文本框内也要限制输入英文字符（但不包括`backspace`按键。）。当输入完毕时（`onkeyup`事件）：小计和总计值跟随着输入的数字的变化而变化  
> ⑧ 在实现删除按钮功能时，需要对所有元素的索引值重新赋值（删除一个元素，数组的长度减一，各个元素的索引都会发生改变）  
> ⑨ 实现⑧的方法：**在删除元素后，重新遍历新的对象数组，将新的k值赋给每一个元素的value值（之前用value记录每个元素的索引值）**

###### 文本框输入数量： ######

//对文本框的操作
            for (var i = 0; i < bEle.length; i++) { 
                bCountInput[i].countNum = i;
                bCountInput[i].onkeydown = function (e) { 
                //对输入的字符进行判断，如果非数字且不是回退键，则return false（return false则不输入）
                    if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8) { 
                    } else { 
                        return false
                    }
                };
                bCountInput[i].onblur = function () { 
                //当文本框的值为空时，在失去焦点后变为1
                    if (this.value == "") { 
                        this.value = 1;
                        bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥";
                    }
                };
                bCountInput[i].onkeyup = function () { 
                //当按键0时，立刻跳转为1
                    if (this.value == "") { 
                        bTotal[this.countNum].innerHTML = "0￥";
                    } else if (this.value == 0) { 
                        this.value = 1;
                        bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥"
                    } else { 
                        bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥";
                    }
                    allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
                }
            }

###### 删除按钮： ######

for (var i = 0; i < bEle.length; i++) { 
                eleDelete[i].value = i;
                eleDelete[i].onclick = function () { 
                    bList.removeChild(bEle[this.value]);
                    for(var k = 0;k<bEle.length;k++){ 
                        //重新给所有对象的value/countNum赋值其对应的新的索引值
                        eleDelete[k].value = k;
                        buttonSub[k].countNum=k;
                        bCountInput[k].countNum=k;
                        buttonAdd[k].countNum=k;
                    }
                    allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
                }

###### 完整代码 ######

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> * { margin: 0; padding: 0; font-size: 14px; } .all { width: 1000px; margin: auto; } .b-top { display: flex; flex-direction: row; background: #ffe0cb; height: 30px; line-height: 30px; } .b-info { flex: 1; text-align: center; } .b-length { flex: 2; } .b-ele { display: flex; flex-direction: row; height: 70px; line-height: 70px; padding: 10px 0; border-bottom: 1px dashed silver; } .b-ele div { text-align: center; } .chooseEle { background: pink; } .b-button { color: blue; width: 60px; height: 25px; text-align: center; line-height: 25px; background: silver; border: none; } .b-count-button { width: 25px; height: 25px; border: none; color: blue; background: orange; } .b-count-input { border: none; height: 20px; width: 25px; outline: none; text-align: center; } img { width: 25px; height: 25px; } .b-display { display: flex; justify-content: space-between; } .b-display div { width: 120px; height: 40px; line-height: 40px; } .left { text-align: center; } .right button { width: 100%; height: 100%; background: red; color: white; text-align: center; border: none; } </style>
    </head>
    <body>
    <div class="all">
        <div class="b-top">
            <div class="b-info">
                <input type="checkbox" class="checkAll"/>全选
            </div>
            <div class="b-info b-length">商品名称</div>
            <div class="b-info">图片</div>
            <div class="b-info">单价</div>
            <div class="b-info b-length">数量</div>
            <div class="b-info">小计</div>
            <div class="b-info">操作</div>
        </div>
        <div class="b-list"></div>
        <div class="b-display">
            <div class="left">
                <input type="checkbox" class="reverseCheck"/>反选
            </div>
            <div class="center">
                总价:<span class="allPrice">0￥</span>
            </div>
            <div class="right">
                <button>去结算></button>
            </div>
        </div>
    </div>
    </body>
    <script> var cart = [ { "id": "101321XNMNSDJYE6871DAS21", "name": "华为nova5 pro", "src": "./cartimage/415d8ef0da06eb00.png", "price": "1499", "totle": "1499", "num": 1 }, { "id": "101321XNMNSDJYE6871DAS21", "name": "华为nova5 pro", "src": "./cartimage/415d8ef0da06eb00.png", "price": "1599", "totle": "1599", "num": 1 }, { "id": "101321XNMNSDJYE6871DAS21", "name": "华为nova5 pro", "src": "./cartimage/415d8ef0da06eb00.png", "price": "1699", "totle": "1699", "num": 1 }, { "id": "101321XNMNSDJYE6871DAS21", "name": "华为nova5 pro", "src": "./cartimage/415d8ef0da06eb00.png", "price": "1799", "totle": "1799", "num": 1 } ]; var bTop = document.getElementsByClassName("b-top")[0]; var bList = document.getElementsByClassName("b-list")[0]; //动态创建页面 for (var i = 0; i < cart.length; i++) { var bEle = document.createElement("div"); bEle.className = "b-ele"; bList.appendChild(bEle); var bNode = document.createElement("div"); bNode.className = "b-info"; var bInput = document.createElement("input"); bInput.type = "checkbox"; bInput.className = "check" bNode.appendChild(bInput); bEle.appendChild(bNode); var bNode = document.createElement("div"); bNode.className = "b-info b-length"; bNode.innerHTML = cart[i].name; bEle.appendChild(bNode); var bNode = document.createElement("div"); bNode.className = "b-info"; bNode.style.lineHeight = "80px" var bImg = document.createElement("img"); bImg.src = cart[i].src; bNode.appendChild(bImg); bEle.appendChild(bNode); var bNode = document.createElement("div"); bNode.className = "b-info b-price"; bNode.innerHTML = cart[i]["price"] + "￥"; bEle.appendChild(bNode); var bNode = document.createElement("div"); bNode.className = "b-info b-length"; var bCountButtonSub = document.createElement("button"); bCountButtonSub.className = "b-count-button buttonSub"; bCountButtonSub.innerHTML = "-"; var bCountInput = document.createElement("input"); bCountInput.type = "text"; bCountInput.className = "b-count-input"; bCountInput.value = cart[i].num; var bCountButtonAdd = document.createElement("button"); bCountButtonAdd.className = "b-count-button buttonAdd"; bCountButtonAdd.innerHTML = "+"; bNode.appendChild(bCountButtonSub); bNode.appendChild(bCountInput); bNode.appendChild(bCountButtonAdd); bEle.appendChild(bNode) var bNode = document.createElement("div"); bNode.className = "b-info b-total"; bNode.innerHTML = cart[i].totle + "￥"; bEle.appendChild(bNode); var bNode = document.createElement("div"); bNode.className = "b-info"; var bCountButton = document.createElement("button"); bCountButton.className = "b-button eleDelete"; bCountButton.innerHTML = "删除"; bNode.appendChild(bCountButton) bEle.appendChild(bNode) } ; //全选 var checkAll = document.getElementsByClassName("checkAll")[0]; var check = document.getElementsByClassName("check"); var bEle = document.getElementsByClassName("b-ele"); var allPrice = document.getElementsByClassName("allPrice")[0]; checkAll.onclick = function () { for (var i = 0; i < check.length; i++) { reverseCheck.checked = false if (checkAll.checked == true) { check[i].checked = true; bEle[i].className = "b-ele chooseEle"; } else { bEle[i].className = "b-ele"; check[i].checked = false; } } }; //反选 var reverseCheck = document.getElementsByClassName("reverseCheck")[0]; reverseCheck.onclick = function () { //输入数量 for (var i = 0; i < check.length; i++) { check[i].checked = !check[i].checked; if (check[i].checked == false) { bEle[i].className = "b-ele"; checkAll.checked = false; } else { bEle[i].className = "b-ele chooseEle"; } } }; //单选 for (var i = 0; i < bEle.length; i++) { check[i].checkValue = i; check[i].onclick = function () { console.log(this.checked) if (this.checked == true) { console.log(this.className) bEle[this.checkValue].className = "b-ele chooseEle"; } else { checkAll.checked = false; bEle[this.checkValue].className = "b-ele" } } } window.onload = function (ev) { // var buttonSub = document.getElementsByClassName("buttonSub"); var buttonAdd = document.getElementsByClassName("buttonAdd"); var bCountInput = document.getElementsByClassName("b-count-input"); var bEle = document.getElementsByClassName("b-ele"); var bTotal = document.getElementsByClassName("b-total"); var bPrice = document.getElementsByClassName("b-price"); var eleDelete = document.getElementsByClassName("eleDelete"); var allPrice = document.getElementsByClassName("allPrice")[0]; //数量进行加减 allPrice.innerHTML = cacAllPrice(bTotal)+"￥"; for (var i = 0; i < bEle.length; i++) { buttonSub[i].countNum = i; buttonSub[i].onclick = function () { if (bCountInput[this.countNum].value == 1) { alert("该宝贝不能减少了噢!") } else { var value = --bCountInput[this.countNum].value; bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, value) + "￥"; allPrice.innerHTML = cacAllPrice(bTotal)+"￥" } }; buttonAdd[i].countNum = i; buttonAdd[i].onclick = function () { var value = ++bCountInput[this.countNum].value; bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, value) + "￥"; allPrice.innerHTML = cacAllPrice(bTotal)+"￥" } } //对文本框的操作 for (var i = 0; i < bEle.length; i++) { bCountInput[i].countNum = i; bCountInput[i].onkeydown = function (e) { if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8) { } else { return false } }; bCountInput[i].onblur = function () { if (this.value == "") { this.value = 1; bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥"; } }; bCountInput[i].onkeyup = function () { if (this.value == "") { bTotal[this.countNum].innerHTML = "0￥"; } else if (this.value == 0) { this.value = 1; bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥" } else { bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥"; } allPrice.innerHTML = cacAllPrice(bTotal)+"￥" } } //删除元素 console.log(bEle.length); for (var i = 0; i < bEle.length; i++) { eleDelete[i].value = i; eleDelete[i].onclick = function () { bList.removeChild(bEle[this.value]); for(var k = 0;k<bEle.length;k++){ //重新给所有对象的value/countNum索引值 eleDelete[k].value = k; buttonSub[k].countNum=k; bCountInput[k].countNum=k; buttonAdd[k].countNum=k; } allPrice.innerHTML = cacAllPrice(bTotal)+"￥" } } } //计算小计 function cacTotal(index, priceObj, value) { return parseFloat(priceObj[index].innerHTML) * parseInt(value); } //计算总价 function cacAllPrice(bTotal) { var totalPrice=0; for(var i=0;i<bTotal.length;i++){ totalPrice += parseFloat(bTotal[i].innerHTML) } return totalPrice; } </script>
    </html>

[20190814180158812.gif]: /images/20211023/963120ecc18a46fdad13097f56e91084.png