[分享]css做手动拖动进度条

在Web应用程序中，经常需要用到进度条。进度条通常用于显示文件下载、表单提交等操作的进度，帮助用户了解上述操作的完成情况。在这篇文章中，我们将介绍如何使用CSS制作一个手动拖动进度条。HTML结构: ...

在Web应用程序中，经常需要用到进度条。进度条通常用于显示文件下载、表单提交等操作的进度，帮助用户了解上述操作的完成情况。在这篇文章中，我们将介绍如何使用CSS制作一个手动拖动进度条。

HTML结构:
<div class="progress">
  <div class="bar"></div>
</div>

CSS样式:
.progress {
  border: 1px solid #ddd;
  width: 300px;
  height: 20px;
  position: relative;
}
.bar {
  height: 100%;
  background-color: #4CAF50;
  width: 0%;
  position: absolute;
} 

我们首先定义了一个进度条的容器，class为progress。该容器的宽度为300px，高度为20px，并设置边框为1px solid #ddd，做出一个简单的边框效果。接着定义了一个class为bar的子元素，用来表示进度条的填充部分。该子元素的高度为100%，即与父元素一样高，宽度为0%。我们通过设置其position为absolute，可以将其与其父元素进行定位，以便我们使用left属性来动态地更改其宽度。

JavaScript代码:
var progressBar = document.querySelector('.bar');
var progress = document.querySelector('.progress');
var dragging = false;

progressBar.addEventListener('mousedown', function(e) {
  dragging = true;
});

progress.addEventListener('mousemove', function(e) {
  if (dragging) {
    var pos = (e.pageX - progress.offsetLeft) / progress.offsetWidth;
    progressBar.style.width = pos * 100 + '%';
  }
});

document.addEventListener('mouseup', function(e) {
  dragging = false;
}); 

以上是JavaScript代码。当我们点击进度条的填充部分时，我们会设置dragging变量为true。然后，我们在进度条容器上添加mousemove事件侦听器。当我们正在拖动时，我们计算数据偏移量，即当前鼠标位置相对于进度条容器左侧的距离，然后将其除以进度条容器的宽度，计算百分比。最后，设置进度条填充部分的宽度等于当前位置的百分比。最后，我们在整个文档上添加mouseup事件侦听器，以便在我们停止拖动时将dragging变量设置为false。

最后，我们就可以制作一个手动拖动进度条了。使用上述代码，我们可以自定义进度条的颜色、宽度、高度、容器大小等，并通过拖拽填充部分来展示进度条。无论在什么情况下，都可以使用这种方法来制作进度条。