Question

我正在尝试创建一个带有百分比的加载栏。我的意思是想象一下，当它达到50％时，它会显示该数字，并且填充到一半。如果是75％，则上升到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的宽度。如果您使一个回调函数能够同时更新两者，那么对您来说将很容易。在这里分享您的代码，以便我们提供进一步的帮助。

网页的进度百分比栏

1 个答案: