使用這種驗證方法的目的：證明當前的用戶不是機器人~防止惡意操作。
實現思路：
1、獲取silde滑塊（獲取元素）
2、為元素注冊事件———鼠標點擊事件（onmousedown）鼠標點擊之后獲得當前鼠標的X坐標。
3、如何獲取到鼠標的x坐標——使用clientX事件（當事件被觸發時，鼠標指針的水平坐標）。
4、鼠標移動事件發生后根據從最開始點擊的X值到移動后的X值之差，作為滑塊移動的差值———— 鼠標移動事件 （onmousemove）；
5、獲取鼠標移動之后的X坐標
6、獲得初始X坐標和移動后X值
7、該變 left的值
8、綠色背景跟着小滑塊走
9、鼠標抬起清除鼠標移動事件。
注意：哪怕鼠標移動的時候超出了最外面的方塊區域，滑塊也要可以移動。所以不能只在滑塊上設置移動事件，需要在文檔document上設置移動事件。
主要用到的事件：
1、鼠標點擊事件onmousedown；
2、鼠標移動事件onmousemove；
3、獲取鼠標指針X坐標 clientX；
4、鼠標按鍵被松開 onmouseup;（有點類似與 click點擊）
注意：
1、作用域——— 一個函數擁有一個作用域 （局部作用域）
2、怎樣才能實現鼠標移動的時候使滑塊也移動：改變滑塊的left值。
3、想要實現滑塊跟隨鼠標移動，就要獲得鼠標移動的x坐標。
實現代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 body{ 12 user-select:none; 13 /*禁止用戶選中*/ 14 } 15 .wrap{ 16 width:300px; 17 height: 40px; 18 background-color:#e8e8e8; 19 margin:100px auto; 20 text-align: center; 21 line-height: 40px; 22 /*border-radius: 7px;*/ 23 position:relative; 24 } 25 .rect{ 26 position:relative; 27 width:300px; 28 height:100%; 29 } 30 .rec{ 31 position:absolute; 32 top:0; 33 left:0; 34 width:0; 35 height:100%; 36 background: #00b894; 37 } 38 .silde{ 39 position:absolute; 40 top:0; 41 left:0; 42 z-index: 11; 43 /*在這里面，當設置長寬為40px時在加上邊框1px就會超出 40px。 44 可以使用怪異盒模型，怪異盒模型會使盒子的寬高包括邊框，操持40px；*/ 45 box-sizing:border-box; 46 width:40px; 47 height:40px; 48 background: #fff; 49 border:1px solid #ccc; 50 } 51 52 </style> 53 </head> 54 <body> 55 <div class='wrap'> 56 <div class='rec'> 57 <div class='rect'>滑塊拖拽驗證 58 <div class='silde'><img src="hkkkk.png" alt=""></div> 59 </div> 60 </div> 61 </div> 62 <script> 63 //獲取事件 64 var silde = document.querySelector('.silde'); 65 var rec = document.querySelector('.rec'); 66 var rect= document.querySelector('.rect'); 67 var img= document.querySelector('img'); 68 var minusX; //保存變化的 X坐標（全局變量） 69 70 //注冊事件 71 silde.onmousedown = function(e) { //鼠標點擊事件，點擊之后執行函數，獲得點擊位置的X坐標 72 var initX = e.clientX; //保存初始按下位置的 X坐標； 73 console.log(11,e); //用以測試 74 document.onmousemove = function(e) { //鼠標移動事件 75 var moveX = e.clientX; 76 // var minusX = moveX - initX; //變化的坐標（要注意作用域的問題，在這里面定義變量，在這個函數之外的函數就沒法使用，所以要將minusX變成全局變量） 77 minusX = moveX - initX; 78 //這里注意一下，獲得的minusX只是一個差值，沒有單位想讓 滑塊的位置改變還需要加上 單位px 79 //這個時候滑塊會跟隨鼠標整個頁面一行的跑，價格條件判段，限制 滑塊移動的區域不可以超過邊框，保持left<=0。 80 if(minusX < 0) { 81 // silde.style.left = '0'; 82 minusX = 0; 83 } 84 if(minusX > 260) { //判斷最大值 85 // silde.style.left = '251'; 86 // 這里面的距離用邊框長度減去 滑塊的長度 300-49 87 minusX = 260; 88 console.log('我到頭了'); 89 } 90 silde.style.left = minusX + 'px'; 91 rec.style.width = minusX + 'px'; 92 if(minusX >= 260) { 93 rect.style.color = 'white'; 94 img.src = 'sure.png'; 95 document.onmousemove = null; 96 silde.onmousedown = null; 97 // rect.innerHTML = '驗證成功'; 98 } 99 // console.log(222,e,minusX); //用以測試 100 } 101 } 102 document.onmouseup = function () { //鼠標抬起事件 103 document.onmousemove = null; //不允許鼠標移動事件發生 104 console.log(111); 105 if(minusX < 260) { //如果沒有到頭 106 img.src = 'hkkkk.png'; 107 silde.style.left = 0; //設置一個 left值 108 rec.style.width = 0; //綠色背景層設置寬度 109 } 110 } 111 </script> 112 </body> 113 </html>
實現效果：
案例中所用到的小圖標可以自行獲取：
