水平拖动条：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{width: 400px;height: 10px;background: slategray;margin:0 auto;margin-top:50px;position: relative;}
#btn{width: 10px;height: 20px;background:blueviolet ;position: absolute;top: -5px;left: 0;cursor: pointer;}
#lead{height:10px ;width: 0px;background: orangered;position: absolute;top:0;left: 0;}
#show{width: 200px;height: 40px;line-height: 40px;text-align:center;background: orchid;font-size: 20px;margin:0 auto;margin-top:20px;font-family:"微软雅黑" ;color:whitesmoke;}
</style>
</head>
<body>
<div id="box">
<div id="btn"></div>
<div id="lead"></div>
</div>
<div id="show"></div>
</body>
</html>
<script type="text/javascript">
var btn =document.getElementById("btn");
var lead=document.getElementById("lead");
var show=document.getElementById("show");
var target=0;
var lefts=0;
show.innerHTML="<span>"+"已经完成"+0+ "%"+ "</span>";
btn.onmousedown=function(event){
var event1=window.event;
lefts=event1.clientX-this.offsetLeft;
var that=this;
document.onmousemove=function(event){
var event2= window.event;
target=event2.clientX-lefts;
that.style.left=target+"px";
if(target<0){
target=0;
that.style.left=target+"px";
}
else if(target>390){
target=390;
that.style.left=target+"px";
}
lead.style.width=target+"px";
var con=parseInt(target/390*100);
// con=con<10?"0"+con:con;
show.innerHTML="<span>"+"已经完成"+con+ "%"+ "</span>";
}
}
document.onmouseup=function(){
document.onmousemove=function(){
return null;
}
}
</script>
