js实现购物车效果

效果

购物车分成三块
目标拆分

1. 添加删除商品
2. 点击购买
3. 提醒购买数量

**
HTML用自己满意的布局即可
Js
将目标创建存储变量

oUl找到页面元素集合
oLi找到购物车购买单品Dom元素
Ostrong购物车存储页面单品购买数量
oP存储最后总价元素位置范围
aStrong存储最后总价单价对比最高价
aEm将页面所有值获取写入
定义变量s等于最高单价便于使用
查找页面控制元素
遍历当前页面的所有可购买单品将索引赋予方法
Fn1标签为页面li标签

点击fn1方法接受遍历元素

oBtn获取点击按钮状态添加或删除商品数量
这里n1获取的值是列表单个商品购买值
获取的由string转成Number用于存储计算更为方便
N2将值取整由于某些商品值不同取整为十进制计算
写fn2方法用来计算单值和总值.

先创建临时变量

Sum1=所有创建数量等于获取到的使用li标签
Sum2=所有单价相加
emMax用所有单价相比求出最高单价
将单价取整

aEm是获取总价元素显示标签
将取值赋予页面
总价和单价求完
点击事件
已经获取到所有点击事件0为-1为+
只需将变量自加或自减
判断商品不能小于0
+无需或选择添加上限

判断完成后将值赋变量
总价=数量*单价
每次点击添加删除时调用方法传入值
刷新总价值
每次点击时值自动刷新
首次页面无值
先将fn2调用一次完成初始值

点击购买按钮判断用户输入
情况有二
无值和正确值
如页面无值提醒用户


值正确提醒用户进行刷新

效果实现

标签：总价,效果,单价,js,获取,点击,购物车,页面
来源： https://blog.csdn.net/weixin_54684864/article/details/116500345