技术小白也能轻松get的前端进度条制作指南

2023-10-24 18:40:33

摩拜前端周刊第12期如约而至，本期我们将为大家带来一篇关于前端进度条制作的指南。

进度条是一种常见的UI元素，它可以用来显示文件下载、视频播放、网页加载等各种任务的进展情况。在本文中，我们将详细介绍如何制作一个前端进度条，包括下载进度条和播放进度条。此外，还将提供代码示例，供读者参考。

### 1. 下载进度条

下载进度条的制作相对比较简单。首先，我们需要创建一个div元素，并设置其width属性为0。然后，我们可以在这个div元素中添加一个span元素，并设置其width属性为100%。这样，当文件下载完成时，span元素的width属性会变成100%，进度条就满了。

以下是一个下载进度条的代码示例：

```html
<div id="progress-bar">
  <span id="progress"></span>
</div>

#progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

#progress {
  width: 0;
  height: 10px;
  background-color: #000;
}

var progress = document.getElementById('progress');

function updateProgress(percentage) {
  progress.style.width = percentage + '%';
}

// 模拟文件下载过程
var intervalId = setInterval(function() {
  var percentage = Math.random() * 100;

  updateProgress(percentage);

  if (percentage >= 100) {
    clearInterval(intervalId);
  }
}, 100);

2. 播放进度条

播放进度条的制作与下载进度条类似。首先，我们需要创建一个div元素，并设置其width属性为0。然后，我们可以在这个div元素中添加一个span元素，并设置其width属性为100%。这样，当视频播放完成时，span元素的width属性会变成100%，进度条就满了。

<div id="progress-bar">
  <span id="progress"></span>
</div>

#progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

#progress {
  width: 0;
  height: 10px;
  background-color: #000;
}

var progress = document.getElementById('progress');

function updateProgress(percentage) {
  progress.style.width = percentage + '%';
}

// 模拟视频播放过程
var intervalId = setInterval(function() {
  var percentage = Math.random() * 100;

  updateProgress(percentage);

  if (percentage >= 100) {
    clearInterval(intervalId);
  }
}, 100);