当前位置：首页 > JavaScript

js实现小计

2026-03-14 08:30:23JavaScript

实现小计功能的方法

在JavaScript中实现小计功能通常涉及对一组数据进行累加或汇总计算。以下是几种常见场景的实现方式：

数组元素求和

使用reduce方法可以快速计算数组元素的总和：

const items = [10, 20, 30, 40];
const subtotal = items.reduce((sum, current) => sum + current, 0);
console.log(subtotal); // 输出100

表格行小计计算

对于HTML表格中的数值列计算小计：

function calculateTableSubtotal() {
  const priceCells = document.querySelectorAll('td.price');
  let subtotal = 0;

  priceCells.forEach(cell => {
    subtotal += parseFloat(cell.textContent) || 0;
  });

  document.getElementById('subtotal').textContent = subtotal.toFixed(2);
}

购物车小计计算

处理包含数量和单价的对象数组：

const cartItems = [
  { name: '商品A', price: 25, quantity: 2 },
  { name: '商品B', price: 40, quantity: 1 }
];

const subtotal = cartItems.reduce((sum, item) => {
  return sum + (item.price * item.quantity);
}, 0);

动态更新小计

当数量变化时实时计算：

function updateSubtotal(inputElement) {
  const row = inputElement.closest('tr');
  const price = parseFloat(row.querySelector('.price').textContent);
  const quantity = parseInt(inputElement.value) || 0;

  row.querySelector('.item-total').textContent = (price * quantity).toFixed(2);
  calculateTotal();
}

含税计算

小计基础上计算含税总额：

js实现小计

function calculateTotal() {
  const subtotal = calculateSubtotal();
  const taxRate = 0.08; // 8%税率
  const tax = subtotal * taxRate;
  const total = subtotal + tax;

  document.getElementById('tax').textContent = tax.toFixed(2);
  document.getElementById('total').textContent = total.toFixed(2);
}