首页 > 代码库 > 平时小案例

平时小案例

水平拖动条:

<!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>

平时小案例