JS实现HTML加购按钮数字增减及归零还原初始功能

你现有代码已经完成了初次点击加购的动画效果，只需要补充数量增减逻辑、归零重置逻辑，同时修复动画重复触发的问题即可实现需求。

核心修改点 #

• 新增数量变量存储当前加购件数，绑定所有相关DOM元素的引用
• 补充加号点击回调：点击时数量+1，同步更新页面显示的数字
• 补充减号点击回调：点击时数量-1，同步更新数字；如果数量减到0，移除加购按钮的clicked状态，回到初始加购按钮样式
• 新增动画重置方法：状态切换时强制触发浏览器重绘，解决移除类名后动画无法二次触发的问题
• 修复CSS全局选择器问题：原代码对所有div标签设置绝对定位，容易引发布局异常，给数量控制组单独加类名绑定样式

完整修改后代码 #

JavaScript 代码 #

// 获取DOM引用
const cartButton = document.querySelector('.cart-button');
const numberDisplay = document.querySelector('.number');
const quantityControl = document.querySelector('.quantity-control');

// 初始化加购数量
let cartCount = 0;

// 初始加购按钮点击事件
cartButton.addEventListener('click', () => {
    cartCount = 1;
    numberDisplay.textContent = cartCount;
    resetAnimationState();
    cartButton.classList.add('clicked');
});

// 加号逻辑
function plus() {
    cartCount++;
    numberDisplay.textContent = cartCount;
}

// 减号逻辑
function minus() {
    cartCount--;
    if (cartCount <= 0) {
        cartCount = 0;
        cartButton.classList.remove('clicked');
        resetAnimationState();
    }
    numberDisplay.textContent = cartCount;
}

// 重置动画状态，保证重复点击时动画正常播放
function resetAnimationState() {
    const animatedElements = [
        cartButton,
        quantityControl,
        ...cartButton.querySelectorAll('.add-to-cart, .added, .cart-icon, .cart-item')
    ];
    animatedElements.forEach(el => {
        el.style.animation = 'none';
        el.offsetHeight; // 触发重绘清除动画缓存
        el.style.animation = '';
    });
}

CSS 代码 #

把原CSS中全局div的样式规则替换成类选择器，避免污染其他元素，其余原有样式、动画代码完全保留即可：

/* 把原来的 div { ... } 全局规则替换成下面的 */
.quantity-control {
  position: absolute;
  top: 300px;
  left: 300px;
  opacity: 0;
}

HTML 代码 #

给包裹加减按钮的容器加上对应类名，调整初始数字为0，补全缺失的结构标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/4fc032096b.js" crossorigin="anonymous"></script>
    <title>Add To Cart Button</title>
</head>
<body>
    <button class="cart-button">
        <span class="add-to-cart">Add To Cart</span>
        <span class="added">Added</span>
        <i class="fas fa-shopping-cart cart-icon"></i>
        <i class="fas fa-box cart-item"></i>
    </button>

    <div class="quantity-control">
        <button class="less" onclick="minus()">-</button>
        <h3 class="number">0</h3>
        <button class="more" onclick="plus()">+</button>
    </div>
</body>
</html>

实现效果 #

• 初始状态显示蓝色「Add To Cart」按钮
• 点击加购按钮后播放原有飞盒动画，动画结束后显示加减控制栏，初始数量为1
• 点击加号数量逐次+1，点击减号数量逐次-1
• 数量减到0时，控制栏自动隐藏，回到初始加购按钮状态，再次点击加购按钮动画可正常重复触发

内容的提问来源于stack exchange，提问作者Saliwee