<progress> 标签是HTML5中用于表示任务进度的元素。它通常用于显示一个任务的完成百分比，比如文件上传的进度或长时间运行的脚本的执行情况。以下是一个简单的 <progress> 标签的使用示例：
<label for="file">文件上传：</label>
<input type="file" id="file" onchange="updateProgress(this)">
<progress id="progress" max="100" value="0">0%</progress>

<script>
  function updateProgress(input) {
    var progress = document.getElementById("progress");
    if (input.files && input.files[0]) {
      var fileSize = input.files[0].size;
      var reader = new FileReader();

      reader.onprogress = function(event) {
        if (event.lengthComputable) {
          var percent = (event.loaded / fileSize) * 100;
          progress.value = percent;
          progress.innerHTML = percent.toFixed(0) + "%";
        }
      };

      reader.readAsDataURL(input.files[0]);
    }
  }
</script>

在这个例子中，当用户选择一个文件进行上传时，JavaScript 脚本会使用 <progress> 元素来显示文件上传的进度。脚本通过监听文件读取器（FileReader）的 onprogress 事件来更新进度条的值。

请注意，<progress> 元素有 max 和 value 属性，用于定义进度条的最大值和当前值。在示例中，max 被设置为100，表示百分比，value 被设置为0表示初始状态。


转载请注明出处：http://www.zyzy.cn/article/detail/3889/HTML