今晚写了一个简单进度条，如下所示：
分析组成：
整个进度条由三块组成，蓝色、红色、紫色三块。其中红色按钮块能够移动，改变紫色和蓝色的宽度。
分析原理：
1.进度条最初样式如下：
2.蓝色块初始宽度为0px，随着红色块的移动，蓝色块宽度跟着改变。
3.其次需注意，拖动红色块设置三种鼠标事件，移动事件（onmousemove），鼠标按下事件（onmousedown），鼠标按压释放事件（onmouseup）。
代码编写如下：
1.首先进行样式搭建
html代码：
<div class="box">
<div class="long">//整个进度条（紫色、红色、蓝色）
<div class="jingdu"></div>//蓝色快
<span class="btn"></span>//红色块
</div>
<div class="num">0%</div>//进度条
</div>
css代码：
*{
margin:0;
padding: 0;
}
div.box{
width: 900px;
height: 50px;
border: 1px solid saddlebrown;
margin: 100px auto;
}
div.long{
width: 900px;
height: 50px;
background-color: violet;
position: relative;
}
div.jingdu{
height: 50px;
width:0px;
background-color:blue;
}
.btn{
width: 50px;
height: 60px;
position: absolute;
top: -5px;
left: 0;
background-color: red;
cursor: move;
}
重点！敲黑板！！！！JS代码如下：
//获取元素
var box=document.querySelector(".box");
var long=document.querySelector(".long");
var jingdu=document.querySelector(".jingdu");
var btn=document.querySelector(".btn");
var num=document.querySelector(".num");
btn.onmousedown=function(event){
var event=event||window.event;
var x=event.clientX-btn.offsetLeft;
// 鼠标按钮
document.onmousemove=function(event){
//event鼠标属性且兼容
var event=event||window.event;
//获取鼠标的坐标
var l=event.clientX-x;
//判断边界情况，红色块不能超出
if(l<0){
l=0;
}
if(l>(long.offsetWidth-btn.offsetWidth)){
l=long.offsetWidth-btn.offsetWidth;
}
// 修改按钮的位置 距离long这个div左边的距离
btn.style.left=l+"px";
// 改变进度条的长度 改变蓝色块的长度
jingdu.style.width=l+"px";
//计算移动距离占整个进度条的百分比
num.innerHTML=parseInt(l/(long.offsetWidth-btn.offsetWidth)*100)+"%";
}
// 鼠标抬起释放
document.onmouseup=function(){
//释放
document.onmouseup=null;
document.onmousemove=null;
}
//取消默认动作，防止默认的行为
return false；
}
原文：https://www.cnblogs.com/znegkaisheng/p/11026005.html