<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;border: none;}
#progress{width: 1000px;height: 20px;line-height: 20px;
/*background-color: #e8e8e8;*/
margin: 100px auto;position: relative;
}
#progress_bar{width: 900px;height: 100%;background-color: #ccc;border-radius: 8px;
position: relative;}
#progress_value{position: absolute;right: 30px;top: 0;}
#progress_bar_fg{width: 0;height: 100%;background-color: purple;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;}
span{
width: 10px;
height: 30px;
background-color: purple;
position: absolute;
left: 0;
top: -5px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="progress">
<div id="progress_bar">
<div id="progress_bar_fg"></div>
<span></span>
</div>
<div id="progress_value">0%</div>
</div>
<script>
window.addEventListener('load', function (ev) {
// 1. 获取标签
var progress = document.getElementById('progress');
var progressBar = progress.children[0];
var progressBarFg= progressBar.children[0];
var mask= progressBar.children[1];
var progressValue= progress.children[1];
var pointX = 0;
function test(ev1) {
var e = ev1 || window.event;
// 2.3 获取水平方向移动的距离
var x = e.pageX - pointX;
if(x < 0){
x = 0;
}else if(x > progressBar.offsetWidth - mask.offsetWidth){
x = progressBar.offsetWidth - mask.offsetWidth
}
// 2.4 走起来
mask.style.left = x + 'px';
progressBarFg.style.width = x + 'px';
progressValue.innerText = parseInt(x / (progressBar.offsetWidth - mask.offsetWidth)* 100) + '%';
return false;
}
// 2. 监听鼠标在mask上面的按下
mask.addEventListener('mousedown', function(evt){
var e = evt || window.event;
// 2.1 获取按下的坐标
pointX = e.pageX - mask.offsetLeft;
// 2.2 监听鼠标的移动
document.addEventListener('mousemove', test);
});
// 3. 监听鼠标松开
document.addEventListener('mouseup', function (ev1) {
document.removeEventListener('mousemove', test);
});
});
</script>
</body>
</html>
