可拖拽的进度条

效果图如下：

可拖拽的进度条

html结构代码：

<style>
.box{
    width: 300px;
    height: 30px;
    border:1px solid #000;
    float:left;
}
.box .progress{
    width: 0;
    height: 30px;
    background-color:hotpink;
}
.percentBox{
    float:left;
    line-height: 30px;
    margin-left:20px;
}
</style>
<div class="box">
    <div class="progress"></div>
</div>
<div class="percentBox">0</div>

js逻辑代码：

// 获取所有标签
var box = document.querySelector('.box');
var progress = document.querySelector('.progress');
var percentBox = document.querySelector('.percentBox');
// 在大盒子中按下鼠标设置进度条
box.addEventListener('mousedown', mousedown)
function mousedown() {
    // 获取事件对象 - 因为设置进度条需要鼠标的位置 - 鼠标的位置需要依赖事件对象
    var e = window.event;
    // 获取鼠标在大盒子上的位置
    var x = e.offsetX;
    // 将获取到的位置设置给进度条小盒子
    progress.style.width = x + 'px';
    // 计算进度条的进度比例 = 进度条小盒子的宽度 / 大盒子的宽度 
    var percent = x / box.clientWidth
    // 将计算好的比例转成比分比的整数
    percent = Math.round(percent * 100)
    // 将计算好的比例放在比例盒子中
    percentBox.innerText = percent
    // 当按下鼠标后，在大盒子中移动鼠标，也要能设置进度条
    box.onmousemove = function() {
        // 获取事件对象
        var ev = window.event;
        // 获取鼠标在大盒子中的位置
        var x = ev.offsetX;
        // 将获取到的位置设置给进度条小盒子
        progress.style.width = x + 'px';
        // 计算进度条的进度比例 = 进度条小盒子的宽度 / 大盒子的宽度 
        var percent = x / box.clientWidth
        // 将计算好的比例转成比分比的整数
        percent = Math.round(percent * 100)
        // 将计算好的比例放在比例盒子中
        percentBox.innerText = percent
    }
}
// 在文档中松开鼠标，大盒子中移动鼠标就不能设置进度条了
document.addEventListener('mouseup', mouseup)
function mouseup() {
    // 将大盒子的移动事件解绑
    box.onmousemove = null
}