网页的进度百分比条

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 对您来说会很容易。 在此处分享您的代码，以便我们进一步提供帮助。