验证滑块代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>验证滑块</title>
  7 </head>
  8 <body>
  9     <style>
 10         label {
 11             display: block;
 12             width: 260px;
 13             margin: 25px auto 0;
 14             text-align: center;
 15             height:40px;
 16             border:1px solid #ccc;
 17             position: relative;
 18         }
 19         .doc{
 20             box-shadow: 0 0 8px #333;
 21         }
 22         #chage{
 23             line-height:38px;
 24             font-size:15px;
 25             position: absolute;
 26             top:0;
 27             left:0;
 28             width:0px;
 29             height:38px;
 30             background:#ccc;
 31             color:#fff;
 32         }
 33         #move{
 34             position: absolute;
 35             top:0;
 36             left:0;
 37             width:40px;
 38             height:38px;
 39             background:#ccc;
 40             display: flex;
 41             justify-content: center;
 42             align-items: center;
 43         }
 44         #do{
 45             width:20px;
 46             height:20px;
 47             border:2px solid #fff;
 48             background:#ccc;
 49             border-radius: 50%;
 50         }
 51     </style>
 52     <label>
 53         <div id="chage"></div>
 54         <div id="move">
 55             <div id="do"></div>
 56         </div>
 57     </label>
 58     <script>
 59         var move=find('move');
 60         var chage=find('chage');
 61         var dos=find('do');
 62         var parent=move.parentNode;
 63         var max=parent.offsetWidth-move.offsetWidth;
 64         var mw=move.offsetWidth;
 65         move.onmousedown=function(ev){
 66             var startx=ev.clientX;
 67             var starty=ev.clientY;
 68             dos.classList.add('doc');
 69             document.onmousemove=function(ev){
 70                 var movex=ev.clientX;
 71                 var len=movex-startx;
 72                 if(len>=0 && len<=max)
 73                 {
 74                     chage.style.width=len+"px";
 75                     move.style.left=len+'px';
 76                 }
 77 
 78             }
 79         }
 80         function close(obj){
 81             obj.parentNode.removeChild(obj);
 82         }
 83         document.onmouseup=function(ev){
 84             var endx=ev.clientX;
 85             var endy=ev.clientY;
 86             document.onmousemove=null;
 87             move.onmousedown=null;
 88             chage.style.width="100%";
 89             close(move);
 90             if("对比数据")
 91             {
 92                 chage.innerText="验证码获取失败";
 93             }
 94             else{
 95                 chage.innerText="验证码获取成功";
 96             }
 97         }
 98         function find(str,type="id"){
 99             return type=='id'?document.getElementById(str):document.getElementsByClassName(str);
100         }
101     </script>
102 </body>
103 </html>
效果图：