让我为您介绍如何使用JavaScript实现可拖拽的进度条。
步骤一：创建HTML结构
首先，在HTML中创建一个进度条的DOM元素，如下所示：
<div class="progress-container">
<div class="progress-bar"></div>
</div>
其中，.progress-container代表进度条的容器，它的width和height要适当；.progress-bar代表进度条，初始时长度为0。
步骤二：使用CSS样式美化进度条
在CSS中，对进度条进行样式美化，如下所示：
.progress-container {
background-color: #ddd;
width: 100%;
height: 20px;
}
.progress-bar {
background-color: #4CAF50;
height: 100%;
width: 0%;
}
.progress-container和.progress-bar的样式可以根据需要进行调整。
步骤三：编写JavaScript代码
接下来就是进度条逻辑的实现了。需要使用JavaScript来实现进度条的动态改变和拖动。我们将进度条功能实现封装成一个对象 Progress：
<div class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
class Progress {
constructor(element) {
this.progressBar = element;
this.dragging = false; //是否正在拖拽
this.offsetX = 0; //当前鼠标位置距离元素左侧的距离
this.left = 0; //元素左侧的距离
this.init();
}
init() {
// 鼠标按下的时候
this.progressBar.addEventListener("mousedown", (e) => {
this.dragging = true;
this.offsetX = e.offsetX;
});
// 在进度条上拖动鼠标的时候
this.progressBar.addEventListener("mousemove", (e) => {
if (this.dragging) {
let left = e.clientX - this.offsetX;
this.setProgress(left);
}
});
// 鼠标松开的时候
document.body.addEventListener("mouseup", () => {
if (this.dragging) {
this.dragging = false;
}
});
}
// 设置进度条进度
setProgress(leftPosition) {
const { progressBar } = this;
const progressContainer = progressBar.parentElement;
const maxLeft = progressContainer.clientWidth - progressBar.clientWidth;
if (leftPosition < 0) {
leftPosition = 0;
} else if (leftPosition > maxLeft) {
leftPosition = maxLeft;
}
this.left = leftPosition;
this.progressBar.style.width = (leftPosition / progressContainer.clientWidth) * 100 + "%";
}
}
const progress = new Progress(document.getElementById("progress-bar"));
进度条对象 Progress 带有一些状态和方法：
progressBar：进度条DOM元素。dragging：是否正在拖拽进度条。offsetX：当前鼠标位置距离进度条左侧的距离。left：进度条左侧的距离。init()：初始化进度条对象。绑定事件监听函数。setProgress(leftPosition)：根据当前进度条左侧的距离设置进度。
其中，init()方法中会对鼠标事件进行监听。当鼠标按下时，将dragging状态设置为 true，记录鼠标位置距离进度条左侧的距离offsetX。在进度条上拖动鼠标时，如果处于拖拽状态，设置进度条进度。当鼠标松开时，将dragging状态设置为 false。
示例一
下面是一个简单的示例，演示了如何使用Progress对象实现可拖拽的进度条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draggable Progress Bar</title>
<style>
.progress-container {
background-color: #ddd;
width: 100%;
height: 20px;
}
.progress-bar {
background-color: #4CAF50;
height: 100%;
width: 0%;
}
</style>
</head>
<body>
<h1>Draggable Progress Bar</h1>
<div class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
<script>
class Progress {
constructor(element) {
this.progressBar = element;
this.dragging = false; //是否正在拖拽
this.offsetX = 0; //当前鼠标位置距离元素左侧的距离
this.left = 0; //元素左侧的距离
this.init();
}
init() {
// 鼠标按下的时候
this.progressBar.addEventListener("mousedown", (e) => {
this.dragging = true;
this.offsetX = e.offsetX;
});
// 在进度条上拖动鼠标的时候
this.progressBar.addEventListener("mousemove", (e) => {
if (this.dragging) {
let left = e.clientX - this.offsetX;
this.setProgress(left);
}
});
// 鼠标松开的时候
document.body.addEventListener("mouseup", () => {
if (this.dragging) {
this.dragging = false;
}
});
}
// 设置进度条进度
setProgress(leftPosition) {
const { progressBar } = this;
const progressContainer = progressBar.parentElement;
const maxLeft = progressContainer.clientWidth - progressBar.clientWidth;
if (leftPosition < 0) {
leftPosition = 0;
} else if (leftPosition > maxLeft) {
leftPosition = maxLeft;
}
this.left = leftPosition;
this.progressBar.style.width =
(leftPosition / progressContainer.clientWidth) * 100 + "%";
}
}
const progress = new Progress(document.getElementById("progress-bar"));
</script>
</body>
</html>
示例二
下面是一个更完整的演示，进度条会自动在1秒内从0到100%：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Auto and Draggable Progress Bar</title>
<style>
.progress-container {
background-color: #ddd;
width: 100%;
height: 20px;
}
.progress-bar {
background-color: #4CAF50;
height: 100%;
width: 0%;
}
</style>
</head>
<body>
<h1>Auto and Draggable Progress Bar</h1>
<div class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
<script>
class Progress {
constructor(element, auto = false) {
this.progressBar = element;
this.dragging = false; //是否正在拖拽
this.offsetX = 0; //当前鼠标位置距离元素左侧的距离
this.left = 0; //元素左侧的距离
this.auto = auto; //是否自动更新进度条
this.timer = null; //定时器
this.lastUpdate = 0; //上一次更新进度的时间
this.init();
}
init() {
// 鼠标按下的时候
this.progressBar.addEventListener("mousedown", (e) => {
this.dragging = true;
this.offsetX = e.offsetX;
});
// 在进度条上拖动鼠标的时候
this.progressBar.addEventListener("mousemove", (e) => {
if (this.dragging) {
let left = e.clientX - this.offsetX;
this.setProgress(left);
}
});
// 鼠标松开的时候
document.body.addEventListener("mouseup", () => {
if (this.dragging) {
this.dragging = false;
}
});
// 自动更新进度
if (this.auto) {
this.timer = setInterval(() => {
const now = Date.now();
if (now - this.lastUpdate > 1000) {
this.lastUpdate = now;
let leftPosition = this.left + 10;
if (leftPosition > 100) {
leftPosition = 0;
}
this.setProgress(leftPosition);
}
}, 10);
}
}
// 设置进度条进度
setProgress(leftPosition) {
const { progressBar } = this;
const progressContainer = progressBar.parentElement;
const maxLeft = progressContainer.clientWidth - progressBar.clientWidth;
if (leftPosition < 0) {
leftPosition = 0;
} else if (leftPosition > maxLeft) {
leftPosition = maxLeft;
}
this.left = leftPosition;
this.progressBar.style.width =
(leftPosition / progressContainer.clientWidth) * 100 + "%";
}
// 停止自动更新
stopAutoUpdate() {
clearInterval(this.timer);
}
}
const progress = new Progress(document.getElementById("progress-bar"), true);
</script>
</body>
</html>
在这个例子中，我们新增了一个auto参数，用于控制是否自动更新进度条。如果auto参数为true，进度条将以1秒内从0%到100%的速度进行自动更新。在init()中，我们使用了定时器来不断地更新进度条的状态。同时，我们增加了一个stopAutoUpdate()方法来停止自动更新，以及lastUpdate参数来记录上一次更新进度的时间。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现可拖拽的进度条 - Python技术站
微信扫一扫 
支付宝扫一扫 