点击按钮实现数字从黑色渐变为红色的JavaScript技术需求

看起来你现在是用固定阈值切换类来改变颜色，但这只能实现几个节点的跳变，而不是平滑的渐变。我们可以通过计算RGB颜色值的方式，让数字从纯黑(0,0,0)逐步过渡到纯红(255,0,0)，下面是具体的实现方案：

核心思路 #

黑色的RGB值是rgb(0, 0, 0)，纯红色是rgb(255, 0, 0)。我们只需要随着计数i从0增长到用户设置的最大值x，把红色分量从0线性增加到255，绿色和蓝色分量保持0，就能实现平滑的颜色过渡。

修改后的完整代码 #

<!-- 新增输入框让用户设置最大值 -->
<input type="number" id="maxValue" placeholder="设置最大值（比如100）" value="100">
<input type="text" id="inc" value="0" readonly="readonly" style="color: rgb(0,0,0);">
<button onclick="adicionar()">点击递增</button>

<script>
let i = 0; // 当前计数
let x = 100; // 默认最大值，支持用户修改

// 监听最大值输入框，实时更新x
document.getElementById('maxValue').addEventListener('input', function() {
  const val = parseInt(this.value);
  if (!isNaN(val) && val > 0) {
    x = val;
    // 若当前计数超过新最大值，重置计数
    if (i > x) {
      i = 0;
      document.getElementById('inc').value = i;
      updateTextColor(i, x);
    }
  }
});

function adicionar() {
  if (i < x) {
    i++;
    const incElement = document.getElementById('inc');
    incElement.value = i;
    // 更新文本颜色
    updateTextColor(i, x);
  } else {
    // 达到最大值后的提示
    alert('已达到最大值，无法继续点击！');
    // 也可以禁用按钮：document.querySelector('button').disabled = true;
  }
}

// 计算并更新文本颜色的核心函数
function updateTextColor(current, max) {
  const incElement = document.getElementById('inc');
  // 计算红色分量：从0到255线性增长
  const red = Math.floor((current / max) * 255);
  // 设置颜色
  incElement.style.color = `rgb(${red}, 0, 0)`;
}
</script>

代码解释 #

• 动态最大值设置：新增输入框支持用户自定义最大值，实时同步x的值，同时处理了当前计数超过新最大值的重置逻辑。
• 平滑渐变逻辑：通过(current / max) * 255计算当前红色分量，保证颜色从黑色到红色的线性平滑过渡，替代了原有的固定阈值跳变。
• 边界提示处理：当计数达到最大值时，弹出提示，也可以选择禁用按钮避免重复点击。
• 适配Dom7场景：如果你的项目基于Framework7，只需把原生DOM操作替换为Dom7写法即可，比如用$$('#inc').css('color', rgb(${red}, 0, 0))来设置颜色。

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