自定义进度条 - 码农教程

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 #my_range_warp{
 position: relative;
 margin: 20px;
 padding: 20px;
 }
 #my_range{
   width: 250px;/*总长度*/
       height: 14px;
       background: white;
       border: solid 1px;
       border-radius: 4px;
       box-shadow:inset 0px 0px 2px 1px black;
       position: relative;
 }
 #my_range_mask{
   width: 50px;
       height: 14px;
       background: green;
       border-radius: 4px;
       box-shadow:inset 0px 0px 2px 1px green;
       position:absolute;
 }
 #my_range_target{
 width: 30px;
 height: 30px;
 border: solid saddlebrown 1px;
 background: gray;
 border-radius: 20px;
 position:absolute;
 cursor: pointer;
 top:-10px;
 left: -15px;/*距离*/
 }
 #my_range_target:hover{
 width: 30px;
 height: 30px;
 border: solid saddlebrown 1px;
 background: cyan;
 border-radius: 20px;
 position:absolute; 
 top:-10px;
 }
 </style>
 </head>
 <body>
 <div id="my_range_warp">
 <div id="my_range">
 <div id="my_range_mask">
 <div id="my_range_target"></div>
 </div>
 </div>
 </div>
 </body>
</html>
<script>
 (function(){
   var my_range=document.getElementById("my_range");
   var my_range_mask=document.getElementById("my_range_mask");
   var my_range_target=document.getElementById("my_range_target");
  var my_range_config={
   my_range_width:550
   //部件配置项
   }
   my_range.style.width=my_range_config.my_range_width+"px";
   var target_min_left=-parseInt(my_range_target.offsetWidth/2);
   var target_max_left=my_range.offsetWidth-parseInt(my_range_target.offsetWidth/2);
   my_range_mask.style.width=my_range_target.offsetLeft+parseInt(my_range_target.offsetWidth/2)+"px";
   my_range.onmousedown=function(e){
   e=e||window.event;
   var startX=e.pageX-my_range_target.offsetLeft;
   document.onmousemove=function(e){
   if(my_range_target.offsetLeft>=target_min_left&&
      my_range_target.offsetLeft<=target_max_left){
        my_range_target.style.left=e.pageX-startX+"px";
        my_range_mask.style.width=e.pageX-startX+parseInt(my_range_target.offsetWidth/2)+"px";
      if(my_range_target.offsetLeft<=target_min_left){
                my_range_target.style.left=target_min_left+"px";
                my_range_mask.style.width=target_min_left+parseInt(my_range_target.offsetWidth/2)+"px";
        }else if(my_range_target.offsetLeft>=target_max_left){
          my_range_target.style.left=target_max_left+"px";
          my_range_mask.style.width=target_max_left+parseInt(my_range_target.offsetWidth/2)+"px";
        }   
        console.log(my_range_target.offsetLeft);//打印进度
    } else{
   return;
   }
   }
   document.onmouseup=function(e){
   document.onmousemove=null;
   document.onmouseup=null;
   }
   }
 })()
</script>