超详细购物车案例js实现购物车上【2021.10.10】

一、前言

        本文所用的代码是之前看一个大大所写的,忘记大大名字了,侵权立删。实现购物车的方法有很多,我们不应该把重心放在代码上,而是应该放在功能上和逻辑上,这样再复杂的项目,也能从众多功能中一步一步下手。不会代码我们可以去查,直到实现功能为止。

二、功能

1.全选按钮

  • 点击后反选按钮的状态改为未选中状态
  • 判断点击后是否为选中状态,是则选中所有单选按钮并通过改变classname从而改变背景颜色,否则取消所有单选按钮

2.反选按钮

  • 点击后通过逻辑运算符!改变单选按钮的选中状态
  • 判断点击后否为选中状态,是则改背景,否则让全选按钮为非选中状态且改回背景

3.单选按钮

  • 点击后是选中状态则改变背景色
  • 非选中状态则改回背景色,并取消全选按钮的选中状态

4.数量文本框

  • 可以用键盘上的数字和删除按钮backsp进行操作,其它按钮显示NaN(不是数值)
  • 当文本框值为0或空值时,让文本框的值改为1
  • 文本框中的值为大于1的数字时,计算小计的值,刷新总价格的值

5.控制数量的加减按钮

  • 点击减少按钮,先判断是否为1,为1则提示不能减了1,不为1则做自减计算小计刷新总价
  • 点击加按钮,做自加,计算小计刷新总价

6.删除按钮

  • 使对应的商品从列表中删除
  • 重新给所有对象加索引值
  • 刷新总价

7.小计

  • 设置形参,通过价格=单价*数量得到小计

8.总价

  • .遍历所有的小计,挨个相加得到总价

三、代码部分

.今天先放上部分代码,下章奉上所有代码




    
    
    
    Document
    


    
全选

商品名称

图片

单价

数量

小记

操作

反选
总结:0¥

你可能感兴趣的:(javascript_笔记专栏,html5,javascript,css)