JS购物车计算器怎么写

最新推荐文章于 2024-08-17 21:15:42 发布

原创最新推荐文章于 2024-08-17 21:15:42 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客介绍了两种使用JavaScript实现购物车计算的方法。第一种方法详细展示了如何动态创建DOM元素，并为加减按钮添加事件监听器以更新商品数量、小计和总计。第二种方法通过事件委托实现了点击加减按钮时的商品计算，同时包含了数据模型、视图渲染和事件绑定的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种

HTML部分：

<body>

<!-- <div class="hang">

单价: 12.5元   

小计: <em>0</em>元

</span>

</div> -->

</div>

商品合计：<span class="pronum">0</span>  件

<br>

共花费了：<span class="pronum">0</span>  元

<br>

最贵商品单价：<span class="pronum">0</span>  元

</div>

</body>

</html>

JS部分

const data = [{

id:1,

count:2,

price:12.5

}, {

id:2,

count:0,

price:10.5

}, {

id:3,

count:3,

price:8.5

}, {

id:4,

count:0,

price:8

}, {

id:5,

count:0,

price:14.5

}];

(function () {

// 首先获取需要操作的元素[对于需要未来获取的,先声明变量赋值初始值]

const computedBox = document.querySelector('#computedBox'),// 获取computedBox元素

topBox = computedBox.querySelector('.top'),//获取top元素

// bottomBox = computedBox.querySelectorAll('.bottom>span') //获取所有span

[countsBox, pricesBox, maxBox] = Array.from(computedBox.querySelectorAll('.bottom>span'))

let minusBtn = [],

addBtn = [],

pronums = [],

ems = [];

// 其次根据Data动态创建所需的行

const render = function render() {

let str = ``

data.forEach((item, index) => {

let { count, price } = item;

str += `<div class="hang">

<span class="pronum">${count}</span>

单价:${price}元   

小计:<em>${(count * price).toFixed(2)}</em>元

</span>

</div>`

});

topBox.innerHTML = str;

// 获取后续需要操作的盒子

minusBtn = Array.from(topBox.querySelectorAll('.minus'));

addBtn = Array.from(topBox.querySelectorAll('.add'));

pronums = Array.from(topBox.querySelectorAll('.pronum'));

ems = Array.from(topBox.querySelectorAll('em'));

console.log(minusBtn, addBtn, pronums, ems);

};

// 循环做事件绑定[未来优化:事件委托]

const handler = function handler() {

// 循环五轮,产生五个闭包===>减号按钮

minusBtn.forEach((minus, index) => {

minus.onclick = function () {

// 根据点击按钮的'索引'获取同行中数量盒子,小计盒子,单价

let pronum = pronums[index],

em = ems[index],

price = data [index].price;

// 计算新的值

let n = +pronum.innerHTML,

m = 0;

n--;

if (n < 0) n = 0;

m = (n * price).toFixed(2);

pronum.innerHTML = n;

em.innerHTML = m;

// 计算总计

computed();

};

});

// 非闭包实现"加号按钮"的事件绑定

for (var i = 0; i < addBtn.length; i++) {

var item = addBtn[i]

item.index = i;

item.onclick = function () {

let pronum = pronums[this.index],

em = ems[this.index],

price = data[this.index].price;

// 计算新的值

let n = +pronum.innerHTML,

m = 0;

n++;

m = (n * price).toFixed(2);

pronum.innerHTML = n;

em.innerHTML = m;

// 计算总计

computed();

};

}

};

// 计算总计信息

const computed = function computed() {

let counts = 0,

prices = 0,

max = [0];

pronums.forEach((pronum, index) => {

let n = +pronum.innerHTML,

price=data[index].price

counts += n;

prices += n * price;

if(n>0) max.push(price);

});

countsBox.innerHTML=counts;

pricesBox.innerHTML=prices.toFixed(2);

maxBox.innerHTML=Math.max(...max);

};

render();

handler();

computed();

})();

第二种

JS部分

(function () {

// 数据模型

const data = [{

id:1,

count:2,

price:12.5

}, {

id:2,

count:0,

price:10.5

}, {

id:3,

count:3,

price:8.5

}, {

id:4,

count:0,

price:8

}, {

id:5,

count:0,

price:14.5

}];

const computedBox = document.querySelector('#computedBox');

// 基于数据动态渲染视图

const render = function render() {

let str = ``,

counts=0,

prices=0,

max=[0];

// 拼接多行产品

str += `<div class="top">`;

data.forEach((item, index) => {

let { count, price } = item;

counts+=count;// 大的数等于小的数相加

prices+=count*price;// 小计等于个数*单价

if(count>0) max.push(price);// 如果个数大于0，单价会进行最大值输出

str += `<div class="hang" index="${index}">

<span class="pronum">${count}</span>

单价:${price}元   

小计:<em>${(count * price).toFixed(2)}</em>元

</span>

</div>`

});

str += `</div>`;

// 拼接汇总信息

str += `<div class="bottom">

商品合计：<span class="pronum">${counts}</span>   件

<br>

共花费了：<span class="pronum">${prices}</span>   元

<br>

最贵商品单价：<span class="pronum">${Math.max(...max)}</span>   元

</div>`

computedBox.innerHTML = str;

};

// 事件绑定 [事件委托] 点击每个按钮，也会触发computedbox的点击事件

computedBox.onclick=function(ev){

// 获取点击的哪一个元素（事件源）

let target = ev.target;

if (target.tagName==="I"){

// 点击事件源的标签名是I：说明点击的是加减按钮[获取他爹身上的索引,再去data中找到对应项]

let index=+target.parentNode.getAttribute('index'),

item=data[index];

// 根据加减修改对应的数量值

if(target.className==="minus"){

item.count--;

if(item.count<0) item.count=0;

}else{

item.count++;

}

// 重新渲染视图

render();

}

};

render();

})();