如何实现从2.01起始的计数器，达到上限时显示红色提示文本

修改后的完整代码 #

HTML #

<div class="counter-container">
  <span id="counter">2.01</span>
  <div id="max-message" class="hidden"></div>
</div>

CSS #

.counter-container {
  font-size: 24px;
  font-family: Arial, sans-serif;
}

#max-message {
  color: red;
  margin-top: 10px;
}

.hidden {
  display: none;
}

JavaScript #

// 自定义上限变量，可直接修改此值调整计数终点
const limit = 31.23;
let currentValue = 2.01;
const counterElement = document.getElementById('counter');
const maxMessageElement = document.getElementById('max-message');

// 计数间隔（毫秒），数值越小计数速度越快
const interval = 100;

const countInterval = setInterval(() => {
  // 每次递增的步长，可按需调整
  currentValue += 0.01;
  // 处理浮点精度问题，确保始终保留两位小数
  currentValue = Math.round(currentValue * 100) / 100;
  
  counterElement.textContent = currentValue.toFixed(2);
  
  // 检测是否到达上限
  if (currentValue >= limit) {
    clearInterval(countInterval);
    // 强制显示精确的上限值
    counterElement.textContent = limit.toFixed(2);
    // 显示红色提示文本
    maxMessageElement.textContent = `${limit.toFixed(2)} is the maximum`;
    maxMessageElement.classList.remove('hidden');
  }
}, interval);

关键逻辑说明 #

• 固定起始值：直接将初始计数设为2.01，同步在HTML中显示初始值
• 自定义上限：通过limit变量直接设置计数终点，修改该值即可快速调整目标上限
• 精度处理：使用Math.round()避免浮点运算导致的精度误差，确保计数始终显示两位小数
• 上限触发机制：当计数达到或超过上限时，立即停止定时器，固定显示上限值，并移除隐藏类显示红色提示文本
• 样式控制：通过CSS类控制提示文本的显示状态，达到上限时自动展示红色提示

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