原生js实现购物车
废话不多说直接上代码
css
<style>
.body{
width: 100%;
}
.text{
width: 100%;
height: 50px;
margin-left: 50px;
display: flex;
flex-direction:row;
align-items:center;
background-color: #fff;
}
.shangjia{
margin-top: 10px;
margin-left: 18px;
}
.tt1,.tt4,.tt6,.tt7{
flex:1;
}
.tt2{
flex-grow:2;
}
#list{
width: 100%;
}
.merchants{
width: 100%;
}
.ul{
margin-top: 20px;
list-style-type: none;
width: 100%;
height: 130px;
padding: 10px 0 10px 0;
margin-top: 30px;
background-color: #fff;
border: 1px solid #ccc;
}
.ul li{
float: left;
}
.li_checkbox{
margin-top: 6px;
margin-left: 17px;
}
.li1{
margin-left: 17px;
margin-top: 30px;
}
.li1 img{
max-height: 80px;
max-width: 80px;
}
.li1 div{
float: right;
width: 226px;
font-size: 14px;
display: block;
max-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-family: "Microsoft YaHei", "微软雅黑";
color: #777;
}
.li2 div{
width: 218px;
margin: 0 5px 0 15px;
color: #9c9c9c;
text-overflow: ellipsis;
display: block;
max-height: 36px;
font-size: 13px;
margin-top: 28px;
margin-left: 80px;
}
.li3{
width: 130px;
height: 119px;
margin-left: 85px;
}
.number{
margin-top: 28px;
}
.number1{
color: #9c9c9c;
text-decoration: line-through;
font-family: Verdana,Tahoma,arial;
}
.number2{
color: #3c3c3c;
font-weight: 700;
font-family: Verdana,Tahoma,arial;
}
.li4{
width: 110px;
height: 30px;
margin-top: 28px;
margin-left: 40px;
}
.bn1,.bn2{
width: 20px;
height: 28px;
float: left;
line-height: 10px;
text-align: center;
border: 1px solid #ccc;
background-color: white;
outline: none;
width: 32px;
height: 28px;
outline: none;
text-align: center;
float: left;
}
#btn2{
cursor: pointer;
}
.inpp1{
width: 32px;
height: 24px;
outline: none;
text-align: center;
float: left;
outline: none;
border: 1px solid #ccc;
}
.li5{
width: 30px;
height: 30px;
margin-left: 128px;
margin-top: 32px;
color: #f40;
}
.li6{
color: #3c3c3c;
margin-left: 180px;
margin-top: 35px;
}
.li6:hover {
color: #f40;
cursor:pointer
}
.bottom{
width: 100%;
height: 50px;
background-color: #e5e5e5;
}
.bottom_left{
float: left;
width: 150px;
line-height: 50px;
margin-left: 12px;
}
.bottom_left span{
margin-left: 20px;
}
.bottom_right{
float: right;
}
.bottom_right_span{
line-height: 50px;
margin-right: 20px;
font-size: 12px;
color: #3c3c3c;
}
.font_size{
color: #f40;
font-weight: 700;
font-size: 18px;
font-family: tohoma,arial;
}
.bottom_right_button{
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
border: none;
font-family: 'Lantinghei SC','Microsoft Yahei';
font-size: 20px;
border:0;
outline:none;
}
.bottom_right_button:hover{
background: #B0B0B0;
color: #fff;
width: 119px;
text-decoration: none;
}
</style>
html
<body>
<div class="body" id="body">
<!-- 头部 -->
<div class="text">
<div class="tt1"><input class="td_inp" type="checkbox" >全选</div>
<div class="tt2">店铺宝贝</div>
<div class="tt4">单价(元)</div>
<div class="tt4">数量</div>
<div class="tt6">金额(元)</div>
<div class="tt7">操作</div>
</div>
<!-- 列表 -->
<div id="list">
<div class="merchants" id="tbd">
<!-- 商家信息 -->
<div class="shangjia"><input type="checkbox" class="merchants_text checkbox shopcheckbox">撒杀手</div>
<!-- 商家商品 -->
<div class="merchants_item">
<ul class="ul">
<li class="li_checkbox"><input type="checkbox" class="merchants_text checkbox subcheckbox"></li>
<li class="li1">
<img src="https://img.alicdn.com/bao/uploaded/i4/2301368431/O1CN01VmueiW2C9RtF3838p_!!2301368431.jpg_80x80.jpg">
<div>华为Mate40Pro液态硅胶手机壳Mate40原装正品保护套原厂5G创意潮限量版防摔全包官方简约超薄网红新品新款女</div>
</li>
<li class="li2">
<div>
颜色分类：Mate40Pro【硅胶】玻璃背盖【向日黄】.送贴膜
</div>
</li>
<li class="li3">
<div class="number">
<div class="number1">123</div>
<div class="number2">456</div>
</div>
</li>
<li class="li4">
<div>
<input class="bn1" type="button" value="-">
<input class="inpp1" type="text" value="1" >
<input class="bn2" type="button" value="+">
</div>
</li>
<li class="li5">
<span>￥</span><span class="moneys">123</span>
</li>
<li class="li6 aas">删除</li>
</ul>
</div>
<!-- 商家商品 -->
<div class="merchants_item">
<ul class="ul">
<li class="li_checkbox"><input type="checkbox" class="merchants_text checkbox subcheckbox"></li>
<li class="li1">
<img src="https://img.alicdn.com/bao/uploaded/i4/2301368431/O1CN01VmueiW2C9RtF3838p_!!2301368431.jpg_80x80.jpg">
<div>华为Mate40Pro液态硅胶手机壳Mate40原装正品保护套原厂5G创意潮限量版防摔全包官方简约超薄网红新品新款女</div>
</li>
<li class="li2">
<div>
颜色分类：Mate40Pro【硅胶】玻璃背盖【向日黄】.送贴膜
</div>
</li>
<li class="li3">
<div class="number">
<div class="number1">123</div>
<div class="number2">999</div>
</div>
</li>
<li class="li4">
<div>
<input class="bn1" type="button" value="-">
<input class="inpp1" type="text" value="1" >
<input class="bn2" type="button" value="+">
</div>
</li>
<li class="li5">
<span>￥</span><span class="moneys">123</span>
</li>
<li class="li6 aas">删除</li>
</ul>
</div>
</div>
<div class="merchants" id="tbd">
<!-- 商家信息 -->
<div class="shangjia"><input type="checkbox" class="merchants_text checkbox shopcheckbox">撒杀手</div>
<!-- 商家商品 -->
<div class="merchants_item">
<ul class="ul">
<li class="li_checkbox"><input type="checkbox" class="merchants_text checkbox subcheckbox"></li>
<li class="li1">
<img src="https://img.alicdn.com/bao/uploaded/i4/2301368431/O1CN01VmueiW2C9RtF3838p_!!2301368431.jpg_80x80.jpg">
<div>华为Mate40Pro液态硅胶手机壳Mate40原装正品保护套原厂5G创意潮限量版防摔全包官方简约超薄网红新品新款女</div>
</li>
<li class="li2">
<div>
颜色分类：Mate40Pro【硅胶】玻璃背盖【向日黄】.送贴膜
</div>
</li>
<li class="li3">
<div class="number">
<div class="number1">123</div>
<div class="number2">456</div>
</div>
</li>
<li class="li4">
<div>
<input class="bn1" type="button" value="-">
<input class="inpp1" type="text" value="1" >
<input class="bn2" type="button" value="+">
</div>
</li>
<li class="li5">
<span>￥</span><span class="moneys">123</span>
</li>
<li class="li6 aas">删除</li>
</ul>
</div>
</div>
<div class="merchants" id="tbd">
<!-- 商家信息 -->
<div class="shangjia"><input type="checkbox" class="merchants_text checkbox shopcheckbox">撒杀手</div>
<!-- 商家商品 -->
<div class="merchants_item">
<ul class="ul">
<li class="li_checkbox"><input type="checkbox" class="merchants_text checkbox subcheckbox"></li>
<li class="li1">
<img src="https://img.alicdn.com/bao/uploaded/i4/2301368431/O1CN01VmueiW2C9RtF3838p_!!2301368431.jpg_80x80.jpg">
<div>华为Mate40Pro液态硅胶手机壳Mate40原装正品保护套原厂5G创意潮限量版防摔全包官方简约超薄网红新品新款女</div>
</li>
<li class="li2">
<div>
颜色分类：Mate40Pro【硅胶】玻璃背盖【向日黄】.送贴膜
</div>
</li>
<li class="li3">
<div class="number">
<div class="number1">123</div>
<div class="number2">456</div>
</div>
</li>
<li class="li4">
<div>
<input class="bn1" type="button" value="-">
<input class="inpp1" type="text" value="1" >
<input class="bn2" type="button" value="+">
</div>
</li>
<li class="li5">
<span>￥</span><span class="moneys">123</span>
</li>
<li class="li6 aas">删除</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<div class="bottom_left">
<input class="td_inp" type="checkbox" >全选
<span id="btn2">删除</span>
</div>
<div class="bottom_right">
<span class="bottom_right_span">已选商品: <span class="font_size" id="ss2">0</span> 件 </span>
<span class="bottom_right_span">合计（不含运费）：<span class="font_size" id="ss1"> 0.00 </span></span>
<button class="bottom_right_button">结算</button>
</div>
</div>
</div>
</body>
下面就重头戏js了
<script>
function my$(id){
return document.getElementById(id);
}
var ItemCheckbox = document.getElementsByClassName("checkbox"); //获取除了全选按钮意外每一项的选中按钮
var td_inp = document.getElementsByClassName("td_inp"); //获取全选按钮
var shopcheckbox = document.getElementsByClassName("shopcheckbox") //获取门店的按钮
var subcheckbox = document.getElementsByClassName("subcheckbox"); //商品按钮
var btnns1 = document.getElementsByClassName("bn1"); //减号
var btnns2 = document.getElementsByClassName("bn2"); //加号
var inpps = document.getElementsByClassName("inpp1"); //数量
var aas = document.getElementsByClassName("aas"); //删除按钮
var tbd = document.getElementsByClassName("tbd"); //获取
var spanCount = my$("ss1"); //显示总价
var spanScore = my$("ss2"); //显示总件数
var price = document.getElementsByClassName("number2"); //单价
var moneys = document.getElementsByClassName("moneys"); //小计 单价x数量
// 全选按钮
for ( let i = 0; i < td_inp.length; i++){
td_inp[i].onclick = function () {
for (let j = 0; j < ItemCheckbox.length; j++){
ItemCheckbox[j].checked = td_inp[i].checked;
if (td_inp[i].checked == true) {
for (let k = 0; k < td_inp.length; k++) {
td_inp[k].checked = true
shopCount();
}
}else{
for (let k = 0; k < td_inp.length; k++) {
td_inp[k].checked = false
shopCount();
}
}
}
}
}
// 店铺按钮
for (let i = 0; i < shopcheckbox.length; i++) {
let flag = true
shopcheckbox[i].onclick = function(){
let Sub = this.parentElement.parentElement.getElementsByClassName('subcheckbox')
console.log(Sub);
//循环当前的店铺里面的商品状态跟店铺按钮保持一致
for (let j = 0; j < Sub.length; j++) {
Sub[j].checked = shopcheckbox[i].checked
}
getMoney();
shopCount();
// 循环全部店铺按钮 如果有一个为false 就return 出去
for (let k = 0; k < shopcheckbox.length; k++) {
if (!shopcheckbox[k].checked) {
flag = false;
for (let p = 0; p < td_inp.length; p++) {
td_inp[p].checked = flag
}
getMoney();
shopCount();
return
}
}
// 如果走到这一步说明店铺的按钮都是为true
for (let l = 0; l < td_inp.length; l++) {
td_inp[l].checked = true
getMoney();
shopCount();
}
console.log(shopcheckbox[i].checked);
}
}
//全部的商品按钮
for (let i = 0; i < subcheckbox.length; i++) {
subcheckbox[i].onclick = function(){
console.log('subcheckbox[i]',subcheckbox[i]);
let arr = this.parentElement.parentElement.parentElement.parentElement.getElementsByClassName('subcheckbox') // 获取当前店铺里面所input
let shop = this.parentElement.parentElement.parentElement.parentElement.getElementsByClassName('shopcheckbox') //获取当前店家的状态
let flag = true
let flag1 = true
//如果当前选项为false 就让当前商铺选项未选中，全选按钮也未选中
if (!subcheckbox[i] || !subcheckbox[i].checked ) {
for (let j = 0; j < td_inp.length; j++) {
td_inp[j].checked = false
}
for (let k = 0; k < shop.length; k++) {
shop[k].checked = false
}
}
getMoney();
shopCount();
for (let j = 0; j < arr.length; j++) {
if (!arr[j].checked) {
flag = false;
return
}
}
for (let l = 0; l < shop.length; l++) {
shop[l].checked = flag
}
getMoney();
shopCount();
for (let o = 0; o < shopcheckbox.length; o++) {
if (!shopcheckbox[o].checked) {
flag1 = false;
return
}
}
for (let q = 0; q < td_inp.length; q++) {
td_inp[q].checked = flag1
}
}
}
//数量加一和减一
//循环所有的减号按钮，全部绑定点击事件
for ( var i = 0; i < btnns1.length; i++){
console.log(btnns1[i]);
btnns1[i].style.cursor = "pointer";
btnns2[i].style.cursor = "pointer"
//减号
btnns1[i].onclick = function () {
var minus = this.nextElementSibling;
if (minus.value == 1 ){
alert("商品数量最少为1");
}else {
minus.value --;
getMoney();
shopCount();
}
}
//加号
btnns2[i].onclick = function () {
var add = this.previousElementSibling;
add.value ++;
getMoney();
shopCount();
}
//删除单个商品
aas[i].onclick = function(){
var remove = confirm("你确定要删除吗？");
let isMerchantsItem = this.parentElement.parentElement.parentElement.getElementsByClassName('merchants_item')
if (remove) {
if(isMerchantsItem.length > 1 && isMerchantsItem.length !== 1){
my$("tbd").removeChild(this.parentElement.parentElement)
shopCount()
return false
}
if(isMerchantsItem.length == 1){
my$("list").removeChild(this.parentElement.parentElement.parentElement)
shopCount()
}
}
}
}
//删除所选
my$("btn2").onclick = function () {
// 如果是点击全选时候删除
for (let i = 0; i < td_inp.length; i++) {
if (td_inp[i].checked) {
let list = my$("list")
my$("body").removeChild(list)
for (let m = 0; m < td_inp.length; m++) {
td_inp[m].checked = false
}
shopCount();
return false
}
}
for (let j = 0; j < subcheckbox.length; j++) {
if (subcheckbox[j].checked) {
//当前要删除的标签
let subBox = subcheckbox[j].parentElement.parentElement.parentElement
//当前父标签
let parent = subBox.parentElement
//上一个兄弟
let previous = subBox.previousElementSibling
//下一个兄弟
let nextS = subBox.nextElementSibling
console.log('当前标签',subBox);
console.log('当前父标签',parent);
console.log('上一个兄弟',previous);
console.log('下一个兄弟',nextS);
console.log("当前上一个兄弟的类名",previous.getAttribute("class"));
//如果要删除的节点没有下一个兄弟标签，并且上一个标签的类名是"shangjia" 就证明当前店铺就一个商品，就把当前商铺删除
if (!nextS && previous.getAttribute("class") == "shangjia") {
my$("list").removeChild(parent)
}
subBox.parentNode.removeChild(subBox)
shopCount();
}
}
}
// 小计金额
function getMoney(){
for ( var j = 0;j < price.length;j++){
moneys[j].innerText = (price[j].innerText-0) * (inpps[j].value-0)
}
}
//计算总价格和总件数
function shopCount() {
var moneysCount = 0; //储存总价
var score = 0; //储存总件数
for (let i = 0; i < moneys.length; i++) {
if (subcheckbox[i].checked) {
moneysCount = moneysCount + parseInt(moneys[i].innerText) // 总价
score = score + parseInt(inpps[i].value-0)
}
}
spanCount.innerText = moneysCount;
spanScore.innerText = score;
}
</script>
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
