Javascript/CSS：捐赠进度条，间隔显示设定值/金额答案

【问题标题】：Javascript/CSS: donation progress bar with intervals which shows a set value/amountJavascript/CSS：捐赠进度条，间隔显示设定值/金额
【发布时间】：2023-01-13 07:09:23
【问题描述】：

我是 Javascript 的新手。我创建了一个带有间隔的“捐赠进度条”。该栏由一个按钮激活，并在其末尾停止；但我希望，一旦激活，条形图就会停止到我设置的特定数量（例如 20.000 美元），然后在条形图本身的中间显示该数量。我在维基百科上见过这样的一种。我必须使用哪个功能来执行此操作？我找不到.. 提前致谢！

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;
    }
  }
}

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 {
  /* display: block; */
  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;
}

<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>

【问题讨论】：

标签： javascript html css progress-bar

【解决方案1】：

一种简单的方法是在进度条本身上指定一个属性。您可以执行类似<div class="progress-bar" id="progress-bar" goal="20,000"> 的操作，将“目标”属性直接添加到 HTML 中。

然后，您可以使用 getAttribute() 函数在您的 if 语句中检索它的值，例如 if (stepValue >= parseInt(elem.getAttribute("goal")) {...，您可以在其中检索属性值，并将它（这是一个字符串值）解析为一个整数，以便它是与 stepValue 进行适当比较。

【讨论】：