使用jQuery实现百分比的增减运算

嘿，我懂你在搞jQuery百分比增减功能时摸不着头绪的感觉——别慌，我把可行的解决方案整理好了，咱们一步步来：

咱们要实现的是：基于输入框中的数值，点击按钮进行百分比增减，同时实时更新提示文本和输入框内容，还要保证输入的是有效数字。

HTML 结构 #

<div class="number-forecast">New number will replace this.</div>
<div id="numbers">
  Number: Example: 0.14556416<br/>
  <input class="thenumber" type="tel" maxlength="10" pattern="^\d{2}-\d{3}$" onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)" value="0.14556416" />
  <!-- 补充增减按钮，让功能可交互 -->
  <button class="btn-increase">+5%</button>
  <button class="btn-decrease">-5%</button>
</div>

JavaScript/jQuery 逻辑 #

// 验证输入是否为数字（允许小数点和退格）
function isNumeric(event) {
  const charCode = event.which ? event.which : event.keyCode;
  return (charCode >= 48 && charCode <= 57) || charCode === 46 || charCode === 8;
}

// 限制输入长度，避免超出maxLength设定
function maxLengthCheck(input) {
  if (input.value.length > input.maxLength) {
    input.value = input.value.slice(0, input.maxLength);
  }
}

// jQuery 核心功能实现
$(document).ready(function() {
  // 点击增加按钮：执行+5%逻辑
  $('.btn-increase').on('click', function() {
    updateNumber(5);
  });

  // 点击减少按钮：执行-5%逻辑
  $('.btn-decrease').on('click', function() {
    updateNumber(-5);
  });

  // 数值更新核心函数
  function updateNumber(percentage) {
    const $input = $('.thenumber');
    let currentValue = parseFloat($input.val());

    // 校验输入是否为有效数字
    if (isNaN(currentValue)) {
      $('.number-forecast').text('请输入有效的数字哦！');
      return;
    }

    // 计算百分比增减后的值，保留6位小数（和示例格式匹配）
    const newValue = currentValue * (1 + percentage / 100);
    const formattedValue = newValue.toFixed(6);

    // 更新输入框和提示文本
    $input.val(formattedValue);
    $('.number-forecast').text(`更新后的数值：${formattedValue}`);
  }
});

• 我给HTML补充了增减按钮，让功能可以实际交互；
• isNumeric函数确保用户只能输入数字、小数点和退格键，符合输入限制需求；
• maxLengthCheck函数严格控制输入长度，避免超出设定的maxlength；
• 核心的updateNumber函数做了数字有效性校验，防止非数字输入导致报错，同时统一格式化结果为6位小数（你可以根据需求调整toFixed()的参数）；
• 实时更新提示文本和输入框内容，让用户能直观看到变化。

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