如何让JavaScript捐赠进度条停在指定金额并显示该金额？

我是JavaScript新手，已实现一款带时间间隔的捐赠进度条，点击按钮即可触发，当前进度条会走到100%后停止。我希望修改为：触发后进度条停在设定的特定金额（例如20000$），并在进度条中间显示该金额（类似维基百科的同款效果）。请问需要使用什么函数来实现？

原代码 #

JavaScript #

function move() {
  let elem = document.getElementById("progress-bar");
  let stepValue = 0;
  let id = setInterval(frame, 50);

  function frame() {
    if (stepValue >= 100) {
      clearInterval(id);
    } else {
      elem.style.width = stepValue + 1 + "%";
      elem.innerHTML = stepValue + 1 + "%";
      stepValue = stepValue + 1;
    }
  }
}

CSS #

body {
  max-width: 75%;
  margin: auto;
}

.progress-goals {
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}

.progress-goals h3 {
  display: inline-block;
}

.progress-goals:last-child {
  flex: 1;
}

.progress-bg {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 0px;
  height: 78px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 0 10px #ccc;
  -webkit-box-shadow: inset 0 0 10px #ccc;
  box-shadow: inset 0 0 10px #ccc;
}

.goal-bar {
  background-color: rgb(58, 58, 58);
  width: 5px;
  height: 78px;
  border-radius: 15px;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 0px;
  background: linear-gradient( to bottom, rgba(255, 255, 255, 0.8) 18%, rgba(28, 53, 120, 0.8), rgba(220, 24, 27, 0.8));
  position: absolute;
  overflow: hidden;
  font-size: 15px;
  text-align: center;
  color: white;
  transition: all 700ms ease;
}

.progress-btn-container {
  display: grid;
  place-items: center;
  height: 50px;
}

.progress-btn {
  cursor: pointer;
  margin: auto;
  display: inline-block;
  color: #444;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 600;
}

.progress-btn:hover {
  color: #555;
  background-color: #f1f1f1;
  padding: 9px;
  border: 1px solid #555;
}

HTML #

<div class="progress-goals">
  <h3 class="no-goal">$0</h3>
  <h3 class="first-goal">$1,000</h3>
  <h3 class="second-goal">$10,000</h3>
  <h3 class="last-goal">$100,000</h3>
</div>

<div class="progress-bg" id="progress-bg">
  <div class="goal-bar"></div>
  <div class="goal-bar"></div>
  <div class="goal-bar"></div>
  <div class="goal-bar"></div>
  <div class="progress-bar" id="progress-bar"></div>
</div>

<div class="progress-btn-container">
  <button class="progress-btn" onclick="move()">total donated</button>
</div>

核心依然使用你当前用到的setInterval（定时触发进度增长）和clearInterval（到达目标后停止定时）函数，只需调整逻辑关联金额与进度：

1. 定义关键参数

   • 总目标金额：对应进度条100%的金额（示例为100000）
   • 目标停留金额：你想要进度条停止的金额（示例为20000）
   • 计算目标进度百分比：(targetAmount / totalGoal) * 100

2. 实时计算并显示金额
   在每一步进度增长时，根据当前进度百分比计算对应的金额，并用千分位格式化后显示在进度条中。

3. 修改停止条件
   将原有的stepValue >= 100替换为currentProgress >= targetProgress，到达目标后停止定时器。

修改后的完整代码 #

JavaScript #

function move() {
  const elem = document.getElementById("progress-bar");
  const totalGoal = 100000; // 总目标金额
  const targetAmount = 20000; // 想要停留的目标金额
  const targetProgress = (targetAmount / totalGoal) * 100; // 目标进度百分比
  let currentProgress = 0;
  const id = setInterval(frame, 50);

  // 格式化金额为带千分位的字符串
  function formatAmount(amount) {
    return "$" + amount.toLocaleString();
  }

  function frame() {
    if (currentProgress >= targetProgress) {
      clearInterval(id);
      // 最终固定显示目标金额
      elem.innerHTML = formatAmount(targetAmount);
    } else {
      currentProgress += 0.5; // 调整增长步长，让动画更平滑
      elem.style.width = currentProgress + "%";
      // 计算当前进度对应的金额并显示
      const currentAmount = Math.round((currentProgress / 100) * totalGoal);
      elem.innerHTML = formatAmount(currentAmount);
    }
  }
}

CSS（仅新增垂直居中样式） #

在原.progress-bar样式中添加一行：

line-height: 78px; /* 让文字垂直居中 */

关键说明 #

• setInterval负责每隔50毫秒触发一次进度更新，保证动画连续性
• clearInterval在进度到达目标百分比时停止定时器，终止动画
• toLocaleString()快速实现金额千分位格式化，无需手动编写复杂逻辑
• 新增的line-height让进度条内的金额文字垂直居中，匹配维基百科的显示效果

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