如何在 HTML5 中显示任务的完成进度?

如果我们想要直观地展示任何任务或目标的完成情况，我们会使用 <progress> 元素。为了显示任务完成的进度，我们使用 max 和 value 属性。以下是 HTML 中 <progress> 标签的语法 -

<progress value="20" max="100"></progress>

Progress 有开始和结束标签。它是 HTML5 中一个新的语义元素。此进度条也用于显示文件上传进度。

HTML <progress> 标签支持以下属性 -

它也支持全局属性和事件属性。

示例

以下示例演示了如何在 HTML 中显示任务的完成进度 −

<!DOCTYPE html>
<html>
<body>
   <h1>Progress element in HTML</h1>
   <label for="file">File Copying Progress:</label>
   <progress id="file" value="45" max="100"> 45% </progress>
</body>
</html>

现在，让我们看看如何在 HTML 中设置进度条的样式 −

CSS 设置进度条的样式

现在让我们使用 CSS 设置进度条的样式 –

<!DOCTYPE html>
<html>
<head>
   <style>
      progress[value] {
         -webkit-appearance: none;
         appearance: none;
         width: 250px;
         height: 20px;
      }
   </style>
</head>
<body>
   <h1>Progress element in HTML</h1>
   <label for="file">File Downloading Progress:</label>
   <progress id="file" value="35" max="100"> 35% </progress>
</body>

示例

以下示例创建一个带有两个按钮的进度条，通过应用 JavaScript 代码来增加和减少进度条。

<!DOCTYPE html>
<html>
<style>
   #container {
      width: 100%;
      background-color: gray;
   }

   #bar {
      width: 0%;
      height: 40px;
      background-color: red;
   }
</style>
<body>
   <h1>Progress Bar</h1>
   <div id="container">
      <div id="bar"></div>
   </div>
   <br>
   <button onclick="Increase()">Increase</button>
   <button onclick="Decrease()">Decrease</button>
   <!-- dispaying message for user -->
   <h2>Increase by 5%</h2>
   <h2>Decrease by 5%</h2>
   <script>
      function Increase() {
         var elem = document.getElementById("bar");
         var width = elem.style.width;
         width = width.replace(/%/g, '');
         if (width == "") width = '5';
         else width = parseInt(width) + 5;
         if (width == 100) {
            width = width.toString() + '%';
            elem.style.width = width;
         } else if (width < 100) {
            width = width.toString() + '%';
            elem.style.width = width;
         }
      }

      function Decrease() {
         var elem = document.getElementById("bar");
         var width = elem.style.width;
         width = width.replace(/%/g, '');
         if (width == "") width = '0';
         else width = parseInt(width) - 5;
         if (width == 0) {
            width = width.toString() + '%';
            elem.style.width = width;
         } else if (width > 0) {
            width = width.toString() + '%';
            elem.style.width = width;
         }
      }
   </script>
</body>
</html>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/