網頁的進度百分比條

Question

我正在嘗試制作一個加載欄，但有百分比。 我的意思是想象當它達到 50% 時，它會顯示這個數字，它也會填充到一半。 如果它是 75%，它將 go 直到 3/4。

我正在嘗試使用 HTML、CSS 和 JS 來執行此操作。 到目前為止，我做了所有事情，但同時數字會增加（通過單擊按鈕）並且模式會根據百分比填充？ 這部分挑戰我。 如果可能的話，你能帶我走嗎？ 或者即使有例子讓我可以學習？

更新下面的代碼

    <script>
      var i = 0;

      function buttonClick5() {
        i += 5;
        document.getElementById('demo').innerHTML = i + "€";

      }

      function percentage(per) {
        return (100 / 100) * per;
      }

    </script>
    <div class="textContainer">
    <p class="perc" id="here"></p>
    <script>
      document.getElementById('here').textContent = percentage(10) + "%";
    </script>
    <h2 id="demo">0€</h2>
  </div>

和 css 部分

.textContainer {
margin-top:-10%;
margin-left: 30%;
height: auto;

  text-align: center;
}

.textContainer h2 {

margin-left: -40%;
  font-size: 500px;
  color: rgba(225, 225, 225, .1);
  background-image:  url(color3.jpg);
  background-repeat:repeat;
  -webkit-background-clip: text;
  animation: animateMid 15s linear infinite;
}

@keyframes animateMid {
  0% {
    background-position: left 0px top 0px;
  }

  1% {
    background-position: left 1200px top 0px;
  }
}

基本上，我可以讓圖案移動作為百分比的背景，但始終保持在 100%。

Answer 1

使用您的百分比變量作為顯示進度的 div 的寬度。 將點擊甚至監聽器添加到您的按鈕，該按鈕將更新該百分比變量和 div 的寬度。 如果您進行同時更新兩者的回調 function 對您來說會很容易。 在此處分享您的代碼，以便我們進一步提供幫助。