JS實現(xiàn)拖動滑塊驗證

更新時間：2022年03月07日 09:30:59 作者：Cloud%

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)拖動滑塊驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

實現(xiàn)思路：

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

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

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

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

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

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

7、該變 left的值

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

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

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

主要用到的事件：

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

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

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

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

注意：

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

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

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

實現(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;
? ? ? ? /*在這里面，當(dāng)設(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坐標(biāo)（全局變量）

? ? ? ? //注冊事件
? ? ? ? silde.onmousedown = function(e) { ? ?//鼠標(biāo)點擊事件，點擊之后執(zhí)行函數(shù)，獲得點擊位置的X坐標(biāo)
? ? ? ? ? ? var initX = e.clientX; ? ?//保存初始按下位置的 X坐標(biāo)；
? ? ? ? ? ? console.log(11,e); ? ?//用以測試
? ? ? ? ? ? document.onmousemove = function(e) { ? ? ? ?//鼠標(biāo)移動事件
? ? ? ? ? ? ? ? var moveX = e.clientX;
? ? ? ? ? ? ? ? // var minusX = moveX - initX; ? ?//變化的坐標(biāo)（要注意作用域的問題，在這里面定義變量，在這個函數(shù)之外的函數(shù)就沒法使用，所以要將minusX變成全局變量）
? ? ? ? ? ? ? ? minusX = moveX - initX;
? ? ? ? ? ? ? ? ?//這里注意一下，獲得的minusX只是一個差值，沒有單位想讓 滑塊的位置改變還需要加上 單位px
? ? ? ? ? ? ? ? ?//這個時候滑塊會跟隨鼠標(biāo)整個頁面一行的跑，價格條件判段，限制 滑塊移動的區(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 () { ? ?//鼠標(biāo)抬起事件
? ? ? ? ? ? document.onmousemove = null; ? ?//不允許鼠標(biāo)移動事件發(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>

實現(xiàn)效果：