如何在 html、css 和 javascript/angular 中创建实时进度条答案

【问题标题】：How to create live progress bar in html,css and javascript/angular如何在 html、css 和 javascript/angular 中创建实时进度条
【发布时间】：2021-05-28 21:07:11
【问题描述】：

我在 javascript 中有一个实时进度条，但我需要在多个地方使用它。我只是将它用于加载程序。由于我在多个地方使用相同的进度条，因此一旦完成 100%，我需要它自动返回其原始位置（20%）。下面是代码

HTML/JAVASCRIPT

<!DOCTYPE html>
<html>
<body>
<style>
#myProgress {
    width: 20rem;
    background-color: #ddd;
  }
  
  #myBar {
    height: 15px;
    background-color: #04AA6D;
    text-align: center;
    line-height: 14px;
    color: white;
    border-radius: 5px;
    font-size: 10px;
  }
</style>

<div class="mt-1">Uploading Document....</div>
        <div id="myProgress" class="mt-2">
            <div id="myBar"></div>
          </div>
<div>         
<button onclick="myFunction()">Button1</button>
<button onclick="myFunction2()">Button2</button>
</div>
<script>
function myFunction() {
const elem = document.getElementById('myBar'); 
    let width = 20;
    const id = setInterval(frame, 40);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++; 
        if(elem != null){
        elem.style.width = width + '%'; 
        elem.innerHTML = width * 1  + '%';
    }
      }
    }
    }
    function myFunction2() {
const elem = document.getElementById('myBar'); 
    let width = 20;
    const id = setInterval(frame, 40);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++; 
        if(elem != null){
        elem.style.width = width + '%'; 
        elem.innerHTML = width * 1  + '%';
    }
      }
    }
    }
</script>
</body>
</html>

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

您可以在 if width >=100 中添加超时功能，并将所有内容设置回 20%。

function frame() {
        if (width == 100) {
          clearInterval(id);
          setTimeout(()=>{
            elem.style.width = "20%"; 
            elem.innerHTML = '20%';
          }, 500)
        } else {
          width++; 
          if(elem != null){
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1  + '%';
          }
        }
      }

【讨论】：