js简单版（购物车）

Html

Css


    
        商品名称
        数量
        单价
        小计
        操作
    
    
        烤韭菜
        
            
            0
            
        
        单价：10
        小计：0
        操作：
    
    
        烤大腰子
        
            
            0
            
        
        单价:40
        小计: 0
        操作: 
    
    
        
            一共0件商品,共计花费0元。

商品名称	数量	单价	小计	操作
烤韭菜	0	单价：10	小计：0	操作：
烤大腰子	0	单价:40	小计: 0	操作:
一共0件商品,共计花费0元。

table {
	width:50%;
	position:relative;
	margin:30px auto;
	border-collapse:collapse;
	border:1px solid gray;
}
th {
	background:yellow;
	height:40px;
	margin:0 auto;
}
tr {
	height:40px;
	margin:0 auto;
	text-align:center;
}

class Cart {
    //获取并且更新商品总数量
    getGoodsNumAndUpdate() {
        //获取goods-num数组
        let oGoodsNum = document.getElementsByClassName("goods-num");
        let goodsTotalNums = 0;

for (let i = 0; i < oGoodsNum.length; i++) {
            goodsTotalNums += Number(oGoodsNum[i].innerHTML);
        }

//获取商品总数量的HTML元素
        let oGoodsTotalNums = document.getElementById("goods-total-nums");
        oGoodsTotalNums.innerHTML = goodsTotalNums;
    }

//获取并且更新商品总价格
    getGoodsPriceAndUpdate() {
        //获取每个商品的小计
        let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
        let goodsTotalPrice = 0;

for (let i = 0; i < oGoodsSinglePrice.length; i++) {
            goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
        }

//获取商品的总价格HTML元素
        let oGoodsTotalPrice = document.getElementById("goods-total-price");
        oGoodsTotalPrice.innerHTML = goodsTotalPrice;
    }

//计算小计
    getGoodsSinglePrice(num, price) {
        return num * price;
    }

//货物的添加
    //通过该方法,需要更改页面所有变换的数据
    //btn就是点击的按钮本身
    goodsAdd(btn) {
        //获取goods-num
        let oGoodsNum = btn.previousElementSibling;
        oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
        //获取goods-price
        let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
        //获取goods-single-price
        let oGoodsSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;

oGoodsSinglePrice.innerHTML = this.getGoodsSinglePrice(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);

this.getGoodsNumAndUpdate();
        this.getGoodsPriceAndUpdate();
    }

goodsMin(btn) {
        //获取goods-num
        let oGoodsNum = btn.nextElementSibling;

if (oGoodsNum.innerHTML > 0) {
            oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;

//获取goods-price
            let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
            //获取goods-single-price
            let oGoodsSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;

oGoodsSinglePrice.innerHTML = this.getGoodsSinglePrice(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);

this.getGoodsNumAndUpdate();
            this.getGoodsPriceAndUpdate();
        }
    }

eventBind() {
        let oBtn = document.getElementsByTagName("button");
        let that = this;
        for (let i = 0; i < oBtn.length; i++) {
            if (i % 2 == 0) {
                oBtn[i].onclick = function() {
                    that.goodsMin(this);
                }
            } else {
                oBtn[i].onclick = function() {
                    that.goodsAdd(this);
                }
            }
        }

let oBtnDel = document.getElementsByTagName("input");

for (let i = 0; i < oBtnDel.length; i++) {
            oBtnDel[i].onclick = function() {
                that.remove(this);
            }
        }
    }

remove(btn) {
        let oTr = btn.parentNode.parentNode;
        oTr.remove();
        this.getGoodsNumAndUpdate();
        this.getGoodsPriceAndUpdate();
    }
}

let c = new Cart();

c.eventBind();

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

立即下载

js简单版（购物车）

代码描述：网页首页购物车

更新时间：2020-09-06 00:23:39

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??? ??凼天下???

相关代码

js简单版（购物车）

最新