HTML 任务进度

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <progress> 标签用于指示任务的进度。它通常用于在 HTML 网页中显示任务的进度条。在本实验中,你将学习如何使用 HTML <progress> 标签创建一个基本的进度条。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70819{{"`HTML 任务进度`"}} html/head_elems -.-> lab-70819{{"`HTML 任务进度`"}} html/embed_media -.-> lab-70819{{"`HTML 任务进度`"}} html/forms -.-> lab-70819{{"`HTML 任务进度`"}} html/inter_elems -.-> lab-70819{{"`HTML 任务进度`"}} html/custom_attr -.-> lab-70819{{"`HTML 任务进度`"}} end

创建 HTML 结构

首先,在 index.html 文件中使用以下代码为进度条创建基本的 HTML 结构:

<!doctype html>
<html>
  <head>
    <title>HTML Progress Tag Example</title>
  </head>
  <body>
    <h1>HTML Progress Tag</h1>
    <label for="progress-bar">任务进度:</label>
    <progress id="progress-bar" max="100"></progress>
  </body>
</html>

在这段代码中,我们包含了创建 HTML 页面所需的标签,一个用于页面标题的标题标签,一个用于描述进度条的标签,以及一个带有 id 属性为 "progress-bar" 和 max 属性为 100 的 <progress> 标签。

设置进度条的值

要为进度条设置值,请在 <progress> 标签中添加 value 属性,并将其值设置为 0 到 100 之间的数字。例如,要将进度条设置为 50%,请在 <progress> 标签后添加以下代码:

<progress id="progress-bar" max="100" value="50"></progress>

添加 JavaScript 以更新进度条

为了动态更新进度条,我们将添加一些 JavaScript 代码来更改 <progress> 标签的 value 属性。

将以下 JavaScript 代码添加到 HTML 文件中:

<script>
  let progressBar = document.getElementById("progress-bar");
  let percent = 0;

  function updateProgress() {
    if (percent == 100) {
      clearInterval(intervalId);
      return;
    }
    progressBar.value = percent;
    percent++;
  }

  let intervalId = setInterval(updateProgress, 100);
</script>

在这段代码中,我们创建了一个名为 updateProgress() 的函数,该函数每 100 毫秒更新一次进度条的值。函数会检查进度条是否达到 100%,如果是,则停止计时器。

最后,我们通过调用 setInterval() 并传入 updateProgress() 函数和 100 毫秒的时间间隔来设置计时器。

保存 index.html 文件并在浏览器中打开它。你现在应该会看到一个进度条,其值会随着时间的推移逐渐增加,直到达到 100%。

总结

通过以上步骤,你已经学会了如何使用 HTML 中的 <progress> 标签创建一个基本的进度条。此外,你还学会了如何使用 JavaScript 动态更新进度条。这种技术可以用于显示长时间运行任务的进度,或者指示文件上传的进度。

您可能感兴趣的其他 HTML 教程