为MTG生命追踪器添加生命值调整量实时显示指示器的技术咨询

不管用jQuery还是原生JS，都能快速实现这个需求。核心逻辑是监听生命调整操作→计算变化量→显示带正负标识的指示器→自动淡出重置，下面是两种简易实现方式：

jQuery 实现 #

假设你的页面已有生命显示元素、增减按钮（或输入框），先添加一个指示器容器，再用jQuery监听操作：

HTML 结构示例 #

<!-- 已有生命追踪区域 -->
<div class="life-tracker">
  <span id="current-life">20</span>
  <button class="adjust-btn" data-change="-1">-1</button>
  <button class="adjust-btn" data-change="+1">+1</button>
  <button class="adjust-btn" data-change="-5">-5</button>
  <button class="adjust-btn" data-change="+5">+5</button>
</div>

<!-- 新增指示器 -->
<div id="change-toast" style="display:none; position:fixed; top:30px; right:30px; padding:12px 20px; background:#2d3748; color:white; border-radius:6px; font-size:18px;"></div>

jQuery 代码 #

$(function() {
  let currentLife = parseInt($('#current-life').text());

  // 监听按钮点击（增减操作）
  $('.adjust-btn').click(function() {
    const change = parseInt($(this).data('change'));
    const newLife = currentLife + change;

    // 更新指示器文本并显示/淡出
    const toastText = change > 0 ? `+${change}` : `${change}`;
    $('#change-toast').text(toastText).fadeIn().delay(1200).fadeOut();

    // 更新生命值
    $('#current-life').text(newLife);
    currentLife = newLife;
  });

  // 如果用输入框直接修改生命值，监听change事件
  $('#life-input').change(function() {
    const newLife = parseInt($(this).val());
    const change = newLife - currentLife;
    if (change !== 0) {
      const toastText = change > 0 ? `+${change}` : `${change}`;
      $('#change-toast').text(toastText).fadeIn().delay(1200).fadeOut();
      currentLife = newLife;
      $('#current-life').text(newLife);
    }
  });
});

原生JS 实现 #

如果不想依赖jQuery，用原生JS也能实现相同逻辑，代码更轻量化：

原生JS 代码 #

document.addEventListener('DOMContentLoaded', function() {
  const currentLifeEl = document.getElementById('current-life');
  const changeToast = document.getElementById('change-toast');
  const adjustBtns = document.querySelectorAll('.adjust-btn');
  let currentLife = parseInt(currentLifeEl.textContent);

  // 监听按钮点击
  adjustBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const change = parseInt(this.dataset.change);
      const newLife = currentLife + change;

      // 设置指示器文本并显示
      const toastText = change > 0 ? `+${change}` : `${change}`;
      changeToast.textContent = toastText;
      changeToast.style.display = 'block';
      changeToast.style.opacity = '1';

      // 1.2秒后开始淡出，淡出完成后隐藏并重置透明度
      setTimeout(() => {
        changeToast.style.opacity = '0';
        setTimeout(() => {
          changeToast.style.display = 'none';
          changeToast.style.opacity = '1';
        }, 300);
      }, 1200);

      // 更新生命值
      currentLifeEl.textContent = newLife;
      currentLife = newLife;
    });
  });

  // 输入框修改的情况
  const lifeInput = document.getElementById('life-input');
  if (lifeInput) {
    lifeInput.addEventListener('change', function() {
      const newLife = parseInt(this.value);
      const change = newLife - currentLife;
      if (change !== 0) {
        const toastText = change > 0 ? `+${change}` : `${change}`;
        changeToast.textContent = toastText;
        changeToast.style.display = 'block';
        changeToast.style.opacity = '1';

        setTimeout(() => {
          changeToast.style.opacity = '0';
          setTimeout(() => {
            changeToast.style.display = 'none';
            changeToast.style.opacity = '1';
          }, 300);
        }, 1200);

        currentLife = newLife;
        currentLifeEl.textContent = newLife;
      }
    });
  }
});

额外提示 #

• 可以根据你的UI风格修改指示器的位置、背景色、字体大小等样式
• 调整delay()或setTimeout的时间参数，控制指示器显示的时长
• 如果你的生命调整逻辑更复杂（比如有多个玩家），只需要给每个玩家的指示器和生命元素加上独立标识，重复逻辑即可

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