js+html实现购物车功能
实现购物车物品删除，数量增加减少，选中，批量删除，结算功能，金额汇总，商品数量汇总，前端代码时借用一个博主小哥的，因为本博主对前端显示界面的美化不擅长，这里为了方便，就引用其他博主小哥的前端界面代码！！如果写的不好，望见谅，欢迎大众指出我的不足。
前端css
* {margin:0;padding:0;
}
body {font-size:13px;
}
input {vertical-align:middle;
}
a {text-decoration:none;color:#333333;
}
.fl {float:left;
}
.fr {float:right;
}
.pro-main {width:1000px;margin:100px auto;
}
.cart-info .all,.cart-info .pro-info,.cart-info .dj-price,.cart-info .num-pro,.cart-info .zj-price,.cart-info .cz {float:left;
}
.cart-info {height:40px;line-height:40px;background-color:#EFEFEF;
}
.cart-info .all {width:80px;padding:0px 15px;
}
.cart-info .all input {margin-right:8px;
}
.cart-info .pro-info {width:500px;
}
.cart-info .dj-price {width:80px;
}
.cart-info .num-pro {width:120px;
}
.cart-info .zj-price {width:110px;
}
.cart-info .cz {width:80px;
}
.cart-main {margin-top:15px;
}
.cart-item {border:1px solid #EFEFEF;padding:15px;overflow:hidden;margin-bottom:15px;
}
.cart-j {width:30px;
}
.pro-item {width:560px;
}
.pro-item .pro-img {width:80px;height:80px;
}
.pro-item .pro-title {width:225px;line-height:1.8;padding:0px 15px;
}
.pro-item .pro-gg {width:185px;padding:0px 15px;font-size:10px;color:#666;
}
.price-g {width:80px;color:black;font-weight:bold;
}
.price-num {width:95px;margin-right:30px;background-color:#EFEFEF;/* border:1px solid #EFEFEF;*/
}
.price-num .increment,.price-num .decrement {width:20px;float:left;text-align:center;
}
.price-num .num {float:left;width:50px;text-align:center;
}
.price-jiner{width:110px;color:red;font-weight:bold;
}
.price-caozuo {width:40px;
}
.priceAll {margin:0px 20px;
}
.priceAll span {padding:0px 8px;color:#f22d00;font-weight:bold;font-size:15px;
}
.spnum em {font-style:normal;padding:0px 8px;color:#f22d00;font-weight:bold;font-size:15px;
}
.js-btn {display:block;width:100px;text-align:center;background-color:#f22d00;color:white;
}
.pro-item img {width:80px;
}
html代码：
Document 全选商品信息单价数量金额操作西部数据(WD)蓝盘 1TB1SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)￥28.60+-￥28.60删除
js代码：
其实实现简单的js+html购物车功能，无非是判断哪一个物品类被点击，根据被点击的类名来实现点击事件，并且通过当前的类名来查找当前类名的父类或者兄弟类，从而可以与其他控件实现交互功能！！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！