如何使用Vanilla JS为HTML/CSS数字增减器实现加减交互功能

直接在你现有代码基础上补充原生JS逻辑即可实现需求，不需要改动已写好的HTML和CSS代码。

核心JS代码 #

把下面的代码放到页面</body>闭合标签之前即可生效：

// 获取需要操作的DOM元素
const minusBtn = document.getElementById('minus');
const plusBtn = document.getElementById('plus');
const numDisplay = document.querySelector('.num');

// 定义数值边界配置
const MIN = 1;
const MAX = 5;
// 初始化当前值，和页面默认显示的1保持一致
let currentNum = 1;

// 统一更新按钮禁用状态
function refreshBtnStatus() {
  // 触达最小值时给减号加禁用类，否则移除
  minusBtn.classList.toggle('deactivated', currentNum <= MIN);
  // 触达最大值时给加号加禁用类，否则移除
  plusBtn.classList.toggle('deactivated', currentNum >= MAX);
}

// 绑定加号点击事件
plusBtn.addEventListener('click', () => {
  // 按钮为禁用状态时直接拦截操作
  if (plusBtn.classList.contains('deactivated')) return;
  if (currentNum < MAX) {
    currentNum++;
    numDisplay.textContent = currentNum;
    refreshBtnStatus();
  }
});

// 绑定减号点击事件
minusBtn.addEventListener('click', () => {
  if (minusBtn.classList.contains('deactivated')) return;
  if (currentNum > MIN) {
    currentNum--;
    numDisplay.textContent = currentNum;
    refreshBtnStatus();
  }
});

实现逻辑说明 #

• 先通过原生DOM API拿到两个操作按钮和数值显示节点，提前定义好数值的最小、最大边界，初始化数值和页面默认展示值对齐，避免初始状态和逻辑不同步。
• 抽离了公共的按钮状态刷新函数，每次数值变动后自动判断是否触达边界，用classList.toggle方法自动处理禁用类的添加/移除，不用重复写冗余的判断逻辑。
• 点击事件中首先判断按钮是否处于禁用状态，禁用状态下直接返回不执行后续逻辑，避免样式禁用但功能仍可触发的问题。
• 数值修改后同步更新页面显示内容，再调用状态刷新函数更新两个按钮的可点击状态，初始状态下HTML已经给减号加了禁用类，和逻辑默认值匹配，不需要额外做初始化处理。

完整可运行代码参考 #

如果需要直接调试全量效果，可以直接使用下面的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>数字增减器</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      width: 100%;
      height: 100vh;
      background-color: #888888;
      display: grid;
    }
    div.body {
      align-self: center;
      justify-self: center;
    }
    div.body div.inner {
      display: flex;
      height: 60px;
      width: fit-content;
      column-gap: 10px;
    }
    div.body div.inner div.num_slides {
      background-color: #409bd0;
      display: flex;
      height: inherit;
      width: 60px;
      overflow: hidden;
      font-family: 'Yu Gothic UI';
    }
    div.body div.inner div.num_slides div.num {
      display: flex;
      align-items: center;
      justify-content: center;
      height: inherit;
      min-width: 60px;
      font-size: 40px;
      font-weight: 600;
    }
    div.body div.inner div.btn {
      background-color: #d0d0d0;
      height: 100%;
      width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      font-weight: 900;
      color: #333333;
    }
    div.body div.inner div.btn:hover {
      background-color: #d0d0d0;
      cursor: pointer;
    }
    div.body div.inner div.btn.deactivated {
      opacity: 0.6;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="body">
    <div class="inner">
      <div class="btn deactivated" id="minus">
        <span>&minus;</span>
      </div>
      <div class="num_slides">
        <div class="num">1</div>
      </div>
      <div class="btn" id="plus">
        <span>&plus;</span>
      </div>
    </div>
  </div>

  <script>
    const minusBtn = document.getElementById('minus');
    const plusBtn = document.getElementById('plus');
    const numDisplay = document.querySelector('.num');
    const MIN = 1;
    const MAX = 5;
    let currentNum = 1;

    function refreshBtnStatus() {
      minusBtn.classList.toggle('deactivated', currentNum <= MIN);
      plusBtn.classList.toggle('deactivated', currentNum >= MAX);
    }

    plusBtn.addEventListener('click', () => {
      if (plusBtn.classList.contains('deactivated')) return;
      if (currentNum < MAX) {
        currentNum++;
        numDisplay.textContent = currentNum;
        refreshBtnStatus();
      }
    });

    minusBtn.addEventListener('click', () => {
      if (minusBtn.classList.contains('deactivated')) return;
      if (currentNum > MIN) {
        currentNum--;
        numDisplay.textContent = currentNum;
        refreshBtnStatus();
      }
    });
  </script>
</body>
</html>

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