使用這種驗(yàn)證方法的目的：證明當(dāng)前的用戶(hù)不是機(jī)器人~防止惡意操作。

實(shí)現(xiàn)思路：

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

2、為元素注冊(cè)事件———鼠標(biāo)點(diǎn)擊事件（onmousedown）鼠標(biāo)點(diǎn)擊之后獲得當(dāng)前鼠標(biāo)的X坐標(biāo)。

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

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

5、獲取鼠標(biāo)移動(dòng)之后的X坐標(biāo)

6、獲得初始X坐標(biāo)和移動(dòng)后X值

7、該變 left的值

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

9、鼠標(biāo)抬起清除鼠標(biāo)移動(dòng)事件。

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

主要用到的事件：

1、鼠標(biāo)點(diǎn)擊事件onmousedown；

2、鼠標(biāo)移動(dòng)事件onmousemove；

3、獲取鼠標(biāo)指針X坐標(biāo) clientX；

4、鼠標(biāo)按鍵被松開(kāi) onmouseup;（有點(diǎn)類(lèi)似與 click點(diǎn)擊）

注意：

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

2、怎樣才能實(shí)現(xiàn)鼠標(biāo)移動(dòng)的時(shí)候使滑塊也移動(dòng)：改變滑塊的left值。

3、想要實(shí)現(xiàn)滑塊跟隨鼠標(biāo)移動(dòng)，就要獲得鼠標(biāo)移動(dòng)的x坐標(biāo)。

實(shí)現(xiàn)代碼：


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{        padding:0;        margin:0;    }    body{        user-select:none;        /*禁止用戶(hù)選中*/    }    .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;        /*在這里面，當(dāng)設(shè)置長(zhǎng)寬為40px時(shí)在加上邊框1px就會(huì)超出 40px。        可以使用怪異盒模型，怪異盒模型會(huì)使盒子的寬高包括邊框，操持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'>滑塊拖拽驗(yàn)證                <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坐標(biāo)（全局變量）
        //注冊(cè)事件        silde.onmousedown = function(e) {    //鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊之后執(zhí)行函數(shù)，獲得點(diǎn)擊位置的X坐標(biāo)            var initX = e.clientX;    //保存初始按下位置的 X坐標(biāo)；            console.log(11,e);    //用以測(cè)試            document.onmousemove = function(e) {        //鼠標(biāo)移動(dòng)事件                var moveX = e.clientX;                // var minusX = moveX - initX;    //變化的坐標(biāo)（要注意作用域的問(wèn)題，在這里面定義變量，在這個(gè)函數(shù)之外的函數(shù)就沒(méi)法使用，所以要將minusX變成全局變量）                minusX = moveX - initX;                 //這里注意一下，獲得的minusX只是一個(gè)差值，沒(méi)有單位想讓 滑塊的位置改變還需要加上 單位px                 //這個(gè)時(shí)候滑塊會(huì)跟隨鼠標(biāo)整個(gè)頁(yè)面一行的跑，價(jià)格條件判段，限制 滑塊移動(dòng)的區(qū)域不可以超過(guò)邊框，保持left<=0。                 if(minusX < 0) {                     // silde.style.left = '0';                     minusX = 0;                 }                 if(minusX > 260) { //判斷最大值                     // silde.style.left = '251';                     // 這里面的距離用邊框長(zhǎng)度減去 滑塊的長(zhǎng)度 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 = '驗(yàn)證成功';                 }                // console.log(222,e,minusX);    //用以測(cè)試            }        }        document.onmouseup = function () {    //鼠標(biāo)抬起事件            document.onmousemove = null;    //不允許鼠標(biāo)移動(dòng)事件發(fā)生            console.log(111);            if(minusX < 260) { //如果沒(méi)有到頭                img.src = 'hkkkk.png';                silde.style.left = 0;    //設(shè)置一個(gè) left值                rec.style.width = 0;    //綠色背景層設(shè)置寬度            }        }</script></body></html>

實(shí)現(xiàn)效果：

案例中所用到的小圖標(biāo)可以自行獲?。?/span>

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

一個(gè)簡(jiǎn)單的滑塊拖動(dòng)驗(yàn)證碼實(shí)例

實(shí)現(xiàn)思路：

主要用到的事件：

實(shí)現(xiàn)代碼：

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)