前端用js如何实现购物车功能,如图那样的效果

JavaScript023

前端用js如何实现购物车功能,如图那样的效果,第1张

这是需要多个方法才能完成的

1,需要动态添加商品那一条显示的function

2,个数那个需要一个增加减少的function

3, 需要个统计总数量的

4,需要一个检测checkbox的

你做到什么程度了

无所谓。

某宝用的方法是,把商品信息存入cookie,打开页面,就会显示,但,却不能操作,账号信息并没存入到cookie中。

只存ID的话,如果此时商家把此商品删除。可能用户就搜不到了。应该把该商品信息一并存起来,让用户能看到。只是在操作时,再告诉用户,此数据是否还存在。

一般有两种做法。

一种是

在页面加载完毕后,先初始化一次总金额。

在调用添加、减少方法时,获取总金额的值然后加上或减去物品*数量的值

另一种就是

同样先初始化总金额

在调用添加、减少方法后,直接重新计算所有price的值然后给总金额赋值。

```js

function updateTotalPrice() {

let count= 0

const priceNodes = document.querySelectorAll("li input[name='price']")

priceNodes.forEach(node => {

count+= parseFloat(node.value) * 100

})

document.querySelector("#totalPrice").innerHTML = count/ 100

}

```