实现进度条拖拽功能和点击功能,并显示占比
实现图:
附加改变区域位置,不影响进度条
完整代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 500px;
height: 10px;
background: #bbffaa;
margin: 40px auto;
position: relative;
}
#box2 {
width: 0px;
height: 10px;
background: #31ff00;
position: relative;
}
#box3 {
width: 40px;
height: 40px;
background: #31ff00;
border-radius: 50px;
left: -20px;
position: absolute;
margin-top: -15px;
}
#box0 {
width: 600px;
height: 250px;
background: cornflowerblue;
position: absolute;
text-align: center;
left: 400px;
top: 0px;
}
#p1 {
display: block;
}
#sub{
width: 140px;
height: 30px;
background: #bbffaa;
border: 0;
border-radius: 5px;
}
</style>
<script>
window.onload = function () {
var box3 = document.getElementById("box3");
var box2 = document.getElementById("box2");
var box1 = document.getElementById("box1");
var box0 = document.getElementById("box0");
var p1 = document.getElementById("p1");
var left_1 = document.getElementById("left_1");
var top_1 = document.getElementById("top_1");
var sub = document.getElementById("sub");
//拖拽
//当鼠标被拖拽元素上按下,开始拖拽 onmousedown
box3.onmousedown = function () {
var a = box0.offsetLeft; //100
var b = box1.offsetLeft; //50
var a1 = a + b;
//为document绑定移动
//当鼠标移动时候,图标跟着鼠标一起动, onmousemove
document.onmousemove = function (event) {
var sl2 = document.documentElement.scrollLeft;
event = event || window.event;
var c = event.clientX
if (c >= a1 && c <= (a1 + 500)) {
box3.style.left = c - a1 - 20 + sl2 + 'px';
box2.style.width = c - a1 - 20 + sl2 + 'px';
var d = Math.round((c - a1) / 500 * 100);
p1.innerText = d + "%";
}
//当鼠标松开时,被拖拽元素被固定在当前位置 onmouseup
document.onmouseup = function () {
//取消onmousemove
document.onmousemove = null;
document.onmouseup = null;
}
}
}
//点击提交,更换盒子位置
sub.onclick = function () {
box0.style.left = left_1.value + 'px';
box0.style.top = top_1.value + 'px';
}
//点进度条,更新位置
box1.onclick = function (event) {
event = event || window.event;
var a = box0.offsetLeft; //100
var b = box1.offsetLeft; //50
var a1 = a + b;
var c = event.clientX;
var sl2 = document.documentElement.scrollLeft;
if (c >= a1 && c <= (a1 + 500)) {
box2.style.width = c - a1 + sl2 + 'px';
box3.style.left = c - a1 - 20 + sl2 + 'px';
var d = Math.round((c - a1) / 500 * 100);
p1.innerText = d + "%";
}
}
}
</script>
</head>
<body>
<div id="box0">
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<p id="p1">0%</p>
<div>
改变蓝色区域位置<br>
向左偏移<input type="text" id="left_1">px<br>
向上偏移 <input type="text" id="top_1">px<br>
<input type="button" value="改变" id="sub">
</div>
</div>
</body>
</html>