帮我用html写一个可拖动的进度条
时间: 2023-10-04 22:14:36 浏览: 30
<!DOCTYPE html>
<html>
<head>
<title>可拖动的进度条</title>
<style>
#progressBar {
width: 500px;
height: 20px;
background-color: #ccc;
position: relative;
}
#progress {
height: 100%;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
#handle {
width: 20px;
height: 20px;
background-color: blue;
border-radius: 50%;
position: absolute;
left: 0;
top: -10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="progressBar">
<div id="progress"></div>
<div id="handle"></div>
</div>
<script>
var progressBar = document.getElementById("progressBar");
var progress = document.getElementById("progress");
var handle = document.getElementById("handle");
handle.addEventListener("mousedown", function(e) {
document.addEventListener("mousemove", dragHandle);
});
document.addEventListener("mouseup", function(e) {
document.removeEventListener("mousemove", dragHandle);
});
function dragHandle(e) {
var mouseX = e.clientX - progressBar.offsetLeft;
var progressWidth = progressBar.clientWidth - handle.offsetWidth;
var progressPercentage = (mouseX / progressWidth) * 100;
if (progressPercentage >= 0 && progressPercentage <= 100) {
handle.style.left = progressPercentage + "%";
progress.style.width = progressPercentage + "%";
}
}
</script>
</body>
</html>