使用這種驗證方法的目的：證明當前的用戶不是機器人~防止惡意操作。

實現(xiàn)思路：

1、獲取silde滑塊（獲取元素）

2、為元素注冊事件———鼠標點擊事件（onmousedown）鼠標點擊之后獲得當前鼠標的X坐標。

3、如何獲取到鼠標的x坐標——使用clientX事件（當事件被觸發(fā)時，鼠標指針的水平坐標）。

4、鼠標移動事件發(fā)生后根據(jù)從最開始點擊的X值到移動后的X值之差，作為滑塊移動的差值———— 鼠標移動事件（onmousemove）；

5、獲取鼠標移動之后的X坐標

6、獲得初始X坐標和移動后X值

7、該變 left的值

8、綠色背景跟著小滑塊走

9、鼠標抬起清除鼠標移動事件。

注意：哪怕鼠標移動的時候超出了最外面的方塊區(qū)域，滑塊也要可以移動。所以不能只在滑塊上設(shè)置移動事件，需要在文檔document上設(shè)置移動事件。

主要用到的事件：

1、鼠標點擊事件onmousedown；

2、鼠標移動事件onmousemove；

3、獲取鼠標指針X坐標 clientX；

4、鼠標按鍵被松開 onmouseup;（有點類似與 click點擊）

注意：

1、作用域——— 一個函數(shù)擁有一個作用域（局部作用域）

2、怎樣才能實現(xiàn)鼠標移動的時候使滑塊也移動：改變滑塊的left值。

3、想要實現(xiàn)滑塊跟隨鼠標移動，就要獲得鼠標移動的x坐標。

實現(xiàn)代碼：


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{        padding:0;        margin:0;    }    body{        user-select:none;        /*禁止用戶選中*/    }    .wrap{        width:300px;        height: 40px;        background-color:#e8e8e8;        margin:100px auto;        text-align: center;        line-height: 40px;        /*border-radius: 7px;*/        position:relative;    }    .rect{        position:relative;        width:300px;        height:100%;    }    .rec{        position:absolute;        top:0;        left:0;        width:0;        height:100%;        background: #00b894;    }    .silde{        position:absolute;        top:0;        left:0;        z-index: 11;        /*在這里面，當設(shè)置長寬為40px時在加上邊框1px就會超出 40px。        可以使用怪異盒模型，怪異盒模型會使盒子的寬高包括邊框，操持40px；*/        box-sizing:border-box;        width:40px;        height:40px;        background: #fff;        border:1px solid #ccc;    }</style></head><body>    <div class='wrap'>        <div class='rec'>            <div class='rect'>滑塊拖拽驗證                <div class='silde'><img src="hkkkk.png" alt=""></div>            </div>        </div>    </div>    <script>        //獲取事件        var silde = document.querySelector('.silde');        var rec = document.querySelector('.rec');        var rect= document.querySelector('.rect');        var img= document.querySelector('img');        var minusX;  //保存變化的 X坐標（全局變量）
        //注冊事件        silde.onmousedown = function(e) {    //鼠標點擊事件，點擊之后執(zhí)行函數(shù)，獲得點擊位置的X坐標            var initX = e.clientX;    //保存初始按下位置的 X坐標；            console.log(11,e);    //用以測試            document.onmousemove = function(e) {        //鼠標移動事件                var moveX = e.clientX;                // var minusX = moveX - initX;    //變化的坐標（要注意作用域的問題，在這里面定義變量，在這個函數(shù)之外的函數(shù)就沒法使用，所以要將minusX變成全局變量）                minusX = moveX - initX;                 //這里注意一下，獲得的minusX只是一個差值，沒有單位想讓 滑塊的位置改變還需要加上 單位px                 //這個時候滑塊會跟隨鼠標整個頁面一行的跑，價格條件判段，限制 滑塊移動的區(qū)域不可以超過邊框，保持left<=0。                 if(minusX < 0) {                     // silde.style.left = '0';                     minusX = 0;                 }                 if(minusX > 260) { //判斷最大值                     // silde.style.left = '251';                     // 這里面的距離用邊框長度減去 滑塊的長度 300-49                     minusX = 260;                     console.log('我到頭了');                 }                 silde.style.left = minusX + 'px';                 rec.style.width = minusX + 'px';                 if(minusX >= 260) {                     rect.style.color = 'white';                     img.src = 'sure.png';                     document.onmousemove = null;                     silde.onmousedown = null;                     // rect.innerHTML = '驗證成功';                 }                // console.log(222,e,minusX);    //用以測試            }        }        document.onmouseup = function () {    //鼠標抬起事件            document.onmousemove = null;    //不允許鼠標移動事件發(fā)生            console.log(111);            if(minusX < 260) { //如果沒有到頭                img.src = 'hkkkk.png';                silde.style.left = 0;    //設(shè)置一個 left值                rec.style.width = 0;    //綠色背景層設(shè)置寬度            }        }</script></body></html>