发新贴  快速回复

WEB 前端奥秘探索之旅 - 购物车功能开发

妙味课堂
2018-07-04 15:57

本次公开课是:购物车功能开发

案例说明:

使用原生 JS 完成购物车页面,运用es6方法,简化代码,简化开发思路,写厉害的代码,让别人羡慕去吧。

案例相关知识点学习

基础JS         >>查看详情

Array方法     >>查看详情

ES6相关语法 >>查看详情

案例思路流程

列表
      -  勾选商品
      -  数量控制
      -  小计
统计
      -  全选
      -  勾选商品件数统计
      -  总额计算

      -  现在结算的点击

页面基本结构及样式

商品单选

获取元素后,利用for循环,给每一个勾选框添加点击事件,点击后添加class

数量控制

控制数量的加加减减,每次点击改变对应的商品数量

初始设置加减按钮设置

一上来的数量,对应的按钮状态,如果是1,减号禁止点击,如果是2,加号禁止点击

小计

计算商品各自的小计,单价*数量 = 小计,注意单价上面的单位需要处理,否则获取下来的就是NaN

小计数值会由初始、数量的改变发生改变,用函数进行封装复用

根据当前的商品勾选按钮决定全选按钮的状态

利用到every方法,如果每一个商品的勾选都是true,返回true,否则false

全选

点击全选按钮,让所有商品按钮状态和全选按钮一致

商品总件数统计

讲所有商品的数量进行统计,在初始需要设置,改变数量的时候也需要设置,利用函数封装,在需要的时候进行调用

选中商品件数

筛选出已经选中的商品,将数量进行叠加,当选中元素数量发生改变时,改变总数

应付金额

应付金额的变化和选中商品的件数是同时变化的,所以放在一起进行统计

总结

按照上边步骤我们就可以把购物车的这些基本功能给实现出来,当然在这里边有些点我们可以把它总结出来,也都是常用的一些思路或处理方式
   1)简单的if判断我们可以利用三目书写成一行
   2)学会用新的方法去处理,例如every、some、扩展运算符、let等等
   3)学会用自定义属性,记录状态值

   4)本案例视频及课件获取地址,到本文下方下载附件获取

扩展

这里我们只是实现了没有数据的购物车,并且是用原生js制作的,购物车除了基础功能,还有很重要的就是数据处理,那么在这一块我们还有讲解框架、数据如何制作的项目,大家可以自己尝试一下,在官网中我们也有具体的教程>>具体访问,大家遇到了什么问题,也欢迎来和我们讨论;


妙味《WEB 前端奥秘探索之旅大型公开课》

上课时间:二、周四,晚上 8 点

免费报名:https://ke.qq.com/course/178139?tuin=90de623d

 

公开课内容:各种精彩实战案例 + 知识点测试题。大家可以试着提前完成案例,并自行作答测试题;

周二,讲师分享精彩实战案例,剖析思路、讲解编程技巧、现场演示代码,并随时与大家交流互动。

周四,讲师为大家分解相关测试题、面试题,答疑解惑;

 

加入妙味学习 QQ 群,获取阶段小测题、各种学习计划安排与相关课件资料~

QQ群号:203404514


 免费参加妙味公开课,请联系客服:
  • 咨询 QQ:2852509866、2852509868
  • 微信咨询:miaov-class、miaov-study

 

进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群

 

 

 

附件下载:
 
妙味课堂
2018-07-04 15:58  回复本帖
coolyh

77

2018-07-31 10:25  回复本帖
coolyh

88

2018-07-31 10:25  回复本帖
我是大号

 qqqq

2018-10-30 16:26  回复本帖
eonezhang

666

2018-10-31 21:19  回复本帖
คิดถึง

这个样式,我不会写呀,怎么让它们对齐,老师可以教我吗

2018-11-26 14:51  回复本帖
飛天

家5急用她用应用

2018-12-05 22:06  回复本帖
会流泪的鱼

应该有反选按钮吧,一键清空功能

2019-03-15 08:13  回复本帖
登录 后才可以发表回复