进度条

今晚写了一个简单进度条，如下所示： 

分析组成：
整个进度条由三块组成，蓝色、红色、紫色三块。其中红色按钮块能够移动，改变紫色和蓝色的宽度。
分析原理：
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；
        }