购物车结算用java写_用 JavaScript 模拟购物车的结算功能

各位小伙伴

娜娜又来了

今天我们来模仿

一个购物车实现结算功能

购物车

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

请点击此处输入图片描述

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

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

总体布局：

请点击此处输入图片描述

请点击此处输入图片描述

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

下面给页面设置样式：

请点击此处输入图片描述

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

布局之后的页面效果：

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

请点击此处输入图片描述

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

请点击此处输入图片描述

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

请点击此处输入图片描述

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

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

请点击此处输入图片描述

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

请点击此处输入图片描述

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

请点击此处输入图片描述

怎么样是不是简单明了~

一起看一下效果：

请点击此处输入图片描述

​今天就到这里了

小伙伴们

再见了