使用 JavaScript 创建进度条

进度条用于描述正在执行的任何任务的进度。进度条通常用于显示下载和上传状态。换句话说，我们可以说，进度条可用于描述任何正在进行的状态。

要使用 JavaScript 创建一个基本的进度条，需要执行以下步骤：

1. 为进度条创建 HTML 结构：
   下面的代码包含两个名为“Progress_Status”和“myprogressbar”的“div”标签元素。
   
   
   
   
   
   
   
   
2. 添加 CSS ：
   下面的代码用于设置进度条的宽度和背景颜色以及进度条中的进度状态。

   CSS

   #Progress_Status {
     width: 50%;
     background-color: #ddd;
   }
     
   #myprogressBar {
     width: 1%;
     height: 35px;
     background-color: #4CAF50;
     text-align: center;
     line-height: 32px;
     color: black;
   }
   

3. 添加JavaScript ：
   下面的代码使用 javascript 函数“update”和“scene”创建了一个动态进度条（动画）。

   JavaScript

   function update() {
     var element = document.getElementById("myprogressBar");   
     var width = 1;
     var identity = setInterval(scene, 10);
     function scene() {
       if (width >= 100) {
         clearInterval(identity);
       } else {
         width++; 
         element.style.width = width + '%'; 
       }
     }
   }

4. 链接 HTML、CSS 和 JavaScript 元素
   下面的程序显示了链接上述 HTML、CSS 和 JavaScript 代码的进度条的完整代码：

   HTML

   #Progress_Status {
     width: 50%;
     background-color: #ddd;
   }
     
   #myprogressBar {
     width: 2%;
     height: 20px;
     background-color: #4CAF50;
   }
   
   
     
   Example of Progress Bar Using JavaScript
     
   Download Status of a File:
     
   
     
   
     
   
   Start Download 
     
   
   function update() {
     var element = document.getElementById("myprogressBar");   
     var width = 1;
     var identity = setInterval(scene, 10);
     function scene() {
       if (width >= 100) {
         clearInterval(identity);
       } else {
         width++; 
         element.style.width = width + '%'; 
       }
     }
   }
   
     

   输出 ：

   点击“开始下载”按钮，可以看到进度条中的进度动画。
   

   
   

创建带标签的进度条

要添加数字标签以指示用户在进程中的距离，需要在进度条内部或外部添加一个新元素，以显示进度状态。

要添加标签，请在“myprogressbar”元素中的上述代码中进行以下更改。

CSS

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}

在“更新”和“场景”函数中进行以下更改，以使数字标签随着进度条中的进度更新。

JavaScript

  
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
    
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}
  

下面是使用 HTML、CSS 和 JavaScript 创建带标签的进度条的完整程序：

HTML

  
#Progress_Status {
  width: 50%;
  background-color: #ddd;
}
  
#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}
  
  


  
Example of Progress Bar Using JavaScript
  
Download Status of a File:
  

  1%

  

Start Download 
  

  
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}
  

  

输出 ：