📌  相关文章
📜  如何使用 jQuery 制作进度条图？(1)

📅  最后修改于: 2023-12-03 14:51:58.050000             🧑  作者: Mango

使用 jQuery 制作进度条图

jQuery 是一个常用的 JavaScript 库，可以节省开发人员编写 JavaScript 代码的时间和精力。本文将介绍如何使用 jQuery 制作一个简单的进度条图。

HTML 结构

首先，我们需要在 HTML 中创建一个容器，用于放置进度条。以下是一个基本的 HTML 结构：

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

其中，progress-bar 类用于容器样式，progress 类用于进度条样式。

CSS 样式

接下来，我们需要为进度条添加样式。以下是一个基本的 CSS 样式：

.progress-bar {
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #00bcd4;
  width: 0%;
  transition: width 1s ease;
}

其中，progress-bar 类设置容器的宽度、高度和边框；progress 类设置进度条的高度、背景颜色和过渡效果。

jQuery 代码

最后，我们需要编写 jQuery 代码，用于控制进度条的进度。以下是一个基本的 jQuery 代码：

$(document).ready(function() {
  var progressBar = $('.progress');

  progressBar.animate({width: '100%'}, 5000);
});

其中，$(document).ready 函数用于在文档完全加载后执行代码。

$('.progress') 选择器用于选择进度条元素，并将其存储到变量 progressBar 中。

progressBar.animate({width: '100%'}, 5000) 方法用于使进度条在 5 秒内从 0% 到 100% 进度。

结论

通过上述步骤，我们可以轻松地创建一个简单的进度条图。

完整的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>How to make progress bar chart using jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .progress-bar {
      width: 200px;
      height: 20px;
      border: 1px solid #ccc;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      background-color: #00bcd4;
      width: 0%;
      transition: width 1s ease;
    }
  </style>
</head>
<body>

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

<script>
  $(document).ready(function() {
    var progressBar = $('.progress');

    progressBar.animate({width: '100%'}, 5000);
  });
</script>

</body>
</html>

输出结果：

以上就是如何使用 jQuery 制作进度条图的介绍，希望对您有所帮助。