如何使用 HTML 和 CSS 创建进度条？

在 Web 开发中，进度条通常用于表示任务的完成程度。本文将介绍如何使用 HTML 和 CSS 创建简单的进度条。

HTML

基本的 HTML 结构如下：

<div class="progress-bar">
  <div class="progress"></div>
</div>

我们使用 div 元素表示进度条，包括一个表示进度的子元素 div。

CSS

在 CSS 中，我们使用 width 属性来表示进度。使用 background-color 属性来设置进度条的背景颜色以及进度条本身的颜色。

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
}
.progress {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 10px;
  width: 0;
  transition: width 0.5s ease-in-out;
}

在 CSS 中，我们还使用 border-radius 属性来设置边框的圆角。使用 transition 属性来添加平滑的过渡效果。

JavaScript

现在我们来添加 JavaScript 代码，用于控制进度条。我们将使用 setInterval 函数每隔一段时间更新进度条的值。

function progress() {
  var bar = document.querySelector('.progress');
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      bar.style.width = width + '%';
    }
  }
}
progress();

以上代码中，bar 变量表示进度条，width 变量表示当前进度条的值，id 变量用于保存返回的定时器 ID。在 frame 函数中，我们判断当前的进度条的值是否达到 100%，如果是，我们就清除定时器。否则，我们更新进度条的宽度并设置样式。

完整代码

<div class="progress-bar">
  <div class="progress"></div>
</div>

<style>
  .progress-bar {
    width: 300px;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
  }
  .progress {
    height: 100%;
    background-color: #4CAF50;
    border-radius: 10px;
    width: 0;
    transition: width 0.5s ease-in-out;
  }
</style>

<script>
  function progress() {
    var bar = document.querySelector('.progress');
    var width = 0;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        bar.style.width = width + '%';
      }
    }
  }
  progress();
</script>

这样，你就可以使用 HTML 和 CSS 创建进度条！