各位小伙伴
娜娜又来了
今天我们来模仿
一个购物车实现结算功能
购物车
先来看一下成品的页面效果，原谅我这只有猫的照片，要是放点猫粮，猫砂什么的~会不会有打广告的嫌疑~
请点击此处输入图片描述
就是这个样子的，现在我们来动手做一下。
先来写页面的布局，这边我们使用 ul 列表来做这个布局，一共是六个 ul，其中我们需要写样式的就只有三个（表头，中间内容，结尾），中间的四块是一样的样式可以直接复制。
总体布局：
请点击此处输入图片描述
请点击此处输入图片描述
第一个 li 是我们的商品图片，接着是我们的单价，以及商品数量的选项里面包括 “+” “-” 以及显示购买商品的数量，最后一栏是我们的商品小计（单价*数量）。
下面给页面设置样式：
请点击此处输入图片描述
这些样式属性都很常见，就不一一解释了，伙伴们要是有不熟悉的可以百度一下，就知道这些标签的含义和用法了٩(๑>◡<๑)۶
布局之后的页面效果：
当我们的鼠标滑动到按键的上面时，会改变按键的背景颜色~
请点击此处输入图片描述
下面来写功能部分的代码，首先获取 加 和 减 的按钮，然后获取商品列表的长度用 length 装起来，aSpan 获取的是商品的个数 定义一个 number 数组来存储商品的数量。
请点击此处输入图片描述
然后再来实现添加和减少的操作
请点击此处输入图片描述
在开始是给数组 number 赋值，使里面所有的数据为零，给 add 添加一个 index 属性，用来获取索引值，当我们点击 add【i】 按钮时，对应这个 add 按钮的 number【i】里面的数值 +1，实现产品数量的增加，reduce也是同理，不过要先进行一步判断，如果商品的数量已经为 0 了 ，就时商品数量为 0 ，不会减少成负数。
到这一步我们就实现了，加和减的按键的功能，现在我们来实现修改页面上数据的部分，就是框住的这部分的内容哦~
请点击此处输入图片描述
首先我们要获取产品的单价，小计，商品总数，总价的位置。
请点击此处输入图片描述
然后我们把数据输出到页面的相应的位置上，注意一下获取到的单价是 string字符串类型，要进行格式的转化转化成 number ~~剩下的就是页面的意思了~
请点击此处输入图片描述
怎么样是不是简单明了~
一起看一下效果：
请点击此处输入图片描述
今天就到这里了
小伙伴们
再见了
网友评论