进阶版（购物车）

Html

Css


    
        
            序号
            商品名称
            数量
            单价
            小计
            操作
        
    
    
        
            1
            烧煎饼
            0
            单价：2
            小计：0
            操作：
        

        
            2
            水煮鱼
            0
            单价：15
            小计：0
            操作：
        
    

    
        商品一共0件，共计花费0元
    



    
        序号
        商品名称
        单价
        操作
    
    
        1
        炒饼
        单价：9
        操作：
    
    
        2
        孜然炒肉
        单价：22
        操作：

序号	商品名称	数量	单价	小计	操作
1	烧煎饼	0	单价：2	小计：0	操作：
2	水煮鱼	0	单价：15	小计：0	操作：
商品一共0件，共计花费0元

序号	商品名称	单价	操作
1	炒饼	单价：9	操作：
2	孜然炒肉	单价：22	操作：

* {
	margin:0;
	padding:0;
	margin:0 auto;
}
table {
	width:50%;
	position:relative;
	margin:50px auto;
	border:1px solid black;
	border-collapse:collapse;
}
th {
	background-color:yellow;
}
tr {
	text-align:center;
	height:40px;
	margin:0 auto;
}
button {
	width:19px;
	height:19px;
}

class Cart {
    getGoodsnum() {
        let OGoodsnum = document.getElementsByClassName("goods-num");
        let goodstotalnum = 0;
        for (let i = 0; i < OGoodsnum.length; i++) {
            goodstotalnum += Number(OGoodsnum[i].innerHTML);
        }
        let oGoodstotalnum = document.querySelector("#goods-total-num");
        oGoodstotalnum.innerHTML = goodstotalnum;
    }
    getGoodsPrice() {
        let Ogoodssingleprice = document.getElementsByClassName("goods-single-price");
        let goodstotalprice = 0;
        for (var i = 0; i < Ogoodssingleprice.length; i++) {
            goodstotalprice += Number(Ogoodssingleprice[i].innerHTML);
        }
        let Ogoodstotalprice = document.querySelector("#goods-total-price");
        Ogoodstotalprice.innerHTML = goodstotalprice;
    }
    getGoodsSinglePrice(num, price) {
        return num * price;
    }
    Goodadd(btn) {
        let goodsnum = btn.previousElementSibling;
        goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1;
        let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild;
        let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
        let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice.innerHTML);
        goodssingleprice.innerHTML = Ogoodssinglepc;
        this.getGoodsnum();
        this.getGoodsPrice();
    }
    Goodmin(btn) {
        let goodsnum = btn.nextElementSibling;
        if (goodsnum.innerHTML > 0) {
            goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1;
            let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
            let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);
            goodssingleprice.innerHTML = Ogoodssinglepc;
            this.getGoodsnum();
            this.getGoodsPrice();
        }
    }
    select(btn) {
        let otr = btn.parentNode.parentNode;
        otr.remove();
        this.getGoodsnum();
        this.getGoodsPrice();

}
    xuhao(btn) {
        let oXu = document.getElementsByClassName("xu");
        for (let i = 0; i < oXu.length; i++) {
            oXu[i].innerHTML = i + 1;
        }
    }
    eventbind() {
        let obtns = document.querySelectorAll("button");
        let that = this;
        for (let i = 0; i < obtns.length; i++) {
            if (i % 2) {
                obtns[i].onclick = function() {
                    that.Goodadd(this);
                }
            } else {
                obtns[i].onclick = function() {
                    that.Goodmin(this);
                }
            }
        }
        let oselbtn = document.querySelectorAll(".sel");
        for (let i = 0; i < oselbtn.length; i++) {
            oselbtn[i].onclick = function() {
                that.select(this);
                that.xuhao(this);
            }
        }
    }
}

ca.xuhao();
                ca.eventbind();;
            }
        }
    }
}
let caa = new cartTwo();
caa.addmenu();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

进阶版（购物车）

代码描述：网页首页购物车（加强版）代码

更新时间：2020-09-06 00:24:51

1

最新

发表评论全部评论

暂时没有评论！

★★★★★0

2020/12/29 17:34:25

youbug 回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??? ??凼天下???

相关代码

进阶版（购物车）

最新