模仿购物车实现结算功能

温馨提示：文章底部，有源代码哦！

各位小伙伴

娜娜又来了

今天我们来模仿

一个购物车实现结算功能

购物车

先来看一下成品的页面效果，原谅我这只有猫的照片，要是放点猫粮，猫砂什么的~会不会有打广告的嫌疑~

就是这个样子的，现在我们来动手做一下。

先来写页面的布局，这边我们使用 ul 列表来做这个布局，一共是六个 ul，其中我们需要写样式的就只有三个（表头，中间内容，结尾），中间的四块是一样的样式可以直接复制。

总体布局：

第一个 li 是我们的商品图片，接着是我们的单价，以及商品数量的选项里面包括 “+” “-” 以及显示购买商品的数量，最后一栏是我们的商品小计（单价*数量）。

下面给页面设置样式：

这些样式属性都很常见，就不一一解释了，伙伴们要是有不熟悉的可以百度一下，就知道这些标签的含义和用法了٩(๑>

布局之后的页面效果：

当我们的鼠标滑动到按键的上面时，会改变按键的背景颜色~

下面来写功能部分的代码，首先获取 加 和 减 的按钮，然后获取商品列表的长度用 length 装起来，aSpan 获取的是商品的个数 定义一个 number 数组来存储商品的数量。

然后再来实现添加和减少的操作

在开始是给数组 number 赋值，使里面所有的数据为零，给 add 添加一个 index 属性，用来获取索引值，当我们点击 add【i】 按钮时，对应这个 add 按钮的 number【i】里面的数值 +1，实现产品数量的增加，reduce也是同理，不过要先进行一步判断，如果商品的数量已经为 0 了 ，就时商品数量为 0 ，不会减少成负数。

到这一步我们就实现了，加和减的按键的功能，现在我们来实现修改页面上数据的部分，就是框住的这部分的内容哦~

首先我们要获取产品的单价，小计，商品总数，总价的位置。

然后我们把数据输出到页面的相应的位置上，注意一下获取到的单价是 string字符串类型，要进行格式的转化转化成 number ~~剩下的就是页面的意思了~

怎么样是不是简单明了~

一起看一下效果：

完整代码奉上：

Title

*{margin:;padding:;}

body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:;}

a{text-decoration:none;color: inherit;}

img{display: block;border:none;}

ol,ul{list-style:none;}

.clearfix:after{content:"";display: block;clear: both;}

.fl{float: left;}

.fr{float: right;}

.main{width:1000px;margin:100pxauto;}

.mainul{display: flex;border:1pxsolid#990000;border-bottom: none;}

.mainulli{flex:1;height:100px;line-height:100px;border-left:1pxsolid#990000;text-align: center;}

.mainulli:nth-child(1){border-left: none;}

.mainul:nth-child(1)li{height:40px;background:#cc3366;color:#fff;line-height:40px;}

.mainul:nth-child(2)li:nth-child(1){background:url("images/1.jpg")no-repeatcenter/contain;}

.mainul:nth-child(3)li:nth-child(1){background:url("images/2.jpg")no-repeatcenter/contain;}

.mainul:nth-child(4)li:nth-child(1){background:url("images/3.jpg")no-repeatcenter/contain;}

.mainul:nth-child(5)li:nth-child(1){background:url("images/4.jpg")no-repeatcenter/contain;}

.mainulli.button{display: flex;justify-content: center;align-items: center;}

.mainulli.buttonbutton,.mainulli.buttonspan{width:40px;line-height:40px;}

.mainulli.buttonbutton{height:40px;background:#ccc;color:#fff;cursor: pointer;border: none;}

.mainulli.buttonbutton:hover{background:#cc3366;}

.mainulli.buttonspan{height:38px;border-top:1pxsolid#999;border-bottom:1pxsolid#999;}

.main.bottomli{height:50px;background:#cc3366;border: none;color:#fff;line-height:50px;}

.main.bottomlispan{color: gold;font-weight: bold;}

商品

单价

数量

小计

10

-

+

20

-

+

30

-

+

40

-

+

已选中商品个

合计费用￥

varaAdd =document.querySelectorAll(".button .add");//获取加

varaReduce =document.querySelectorAll(".button .reduce");//获取减

varlength = aReduce.length;//得到商品列表的长度

varaSpan =document.querySelectorAll(".button span");

varnumber = [];//定义一个数组 把我们的对应商品的数量存储在数组里面

varaPrice =document.querySelectorAll(".price");//获取单价

varaCount =document.querySelectorAll(".count");//获取小计

varoSelect =document.querySelector(".select");//获取选中商品数目

varoTotal =document.querySelector(".total");//获取总价

for(vari=; i

number[i] =;

//给 加 添加点击事件

aAdd[i].index = i;//自定义属性存索引值

aAdd[i].onclick =function(){

number[this.index]++;

change(this.index);

};

//给 减 添加点击事件

aReduce[i].index = i;//自定义属性存索引值

aReduce[i].onclick =function(){

if(number[this.index] ===){

number[this.index] =;

}else{

number[this.index]--;

}

change(this.index);

}

}

//定义一个函数 改变数量 小计 已选中商品 合计费用

functionchange(This){

//改变数量

aSpan[This].innerHTML = number[This];

//改变小计

aCount[This].innerHTML = number[This]*parseFloat(aPrice[This].innerHTML);//小计 = 数量*单价 注意：innerHTML获取到的都是字符串

//改变选中商品个数

varsums =;

varsumt =;

for(vari=; i

sums += number[i];

sumt +=parseFloat(aCount[i].innerHTML);

}

oSelect.innerHTML = sums;

oTotal.innerHTML = sumt;

}

今天就到这里了

小伙伴们

再见了

有任何问题都可以在文章留言，娜姐都看着的呢!

合作,投稿,转载，版权问题请联系 李娜：Lina_Java