快捷導(dǎo)航

JavaScript滑動驗證功能實現(xiàn)詳細(xì)代碼

更新時間：2024年06月13日 11:08:02 作者：倆碗螺螄粉

這篇文章主要給大家介紹了關(guān)于JavaScript滑動驗證功能實現(xiàn)的相關(guān)資料,滑動拼圖驗證功能是一種常見的網(wǎng)站人機(jī)驗證方法,旨在防止惡意機(jī)器人或自動化程序?qū)W(wǎng)站進(jìn)行惡意攻擊,需要的朋友可以參考下

功能需求：（圖片可根據(jù)自行更換）

1.、右側(cè)標(biāo)簽的位置是隨機(jī)生成，左側(cè)標(biāo)簽和右側(cè)標(biāo)簽的垂直位置是一致的，

2、通過滑動條控制左側(cè)標(biāo)簽與右側(cè)標(biāo)簽重疊（誤差控制在2px）表示驗證通過，

3、否則驗證失敗，重新生成隨機(jī)位置。

一、效果展示

·效果示例圖

二、代碼區(qū)域

2.1 核心代碼區(qū)域

鼠標(biāo)按下滑塊時，需要獲取鼠標(biāo)在當(dāng)前頁面的坐標(biāo)，以及判斷滑塊的移動范圍。

// 鼠標(biāo)按下滑塊
        liElement.onmousedown = function (e) {
            rx = e.pageX - wrap.offsetLeft;
            var mx = containerWidth - liElement.offsetWidth;
            isDown = true;//鼠標(biāo)按下
            // 鼠標(biāo)在頁面移動
            document.onmousemove = function (event) {
                // 計算出滑塊的位置(鼠標(biāo)在頁面的坐標(biāo) 減去  鼠標(biāo)在滑塊的坐標(biāo))
                // x = event.pageX - rx - liElement.offsetWidth  + cx;
                x = event.pageX - rx - liElement.offsetWidth;
                // 判斷是否超出滑動范圍
                if (x <= 0) x = 0;
                if (x >= mx) x = mx;
                // 設(shè)置滑塊的位置
                liElement.style["left"] = x + "px";
                divElement.style["width"] = x + "px";

                // 設(shè)置紅色標(biāo)簽的位置
                red_x = red_cur_X + x;
                console.log("red_x:", red_x);
                if (red_x >= (containerWidth - red.offsetWidth)) red_x = containerWidth - red.offsetWidth
                red.style["left"] = red_x + "px";
            }
        }

鼠標(biāo)在頁面松開時，判斷滑塊是否到達(dá)缺口的檢測范圍內(nèi)，誤差為2px。

// 鼠標(biāo)在頁面松開
        document.onmouseup = function () {
            // 解綁鼠標(biāo)移動事件
            document.onmousemove = null;
            // cx = x;

            //判斷鼠標(biāo)是否按下滑塊
            if (isDown) {
                // 檢查紅色和綠色標(biāo)簽的位置
                // console.log("紅色盒子的X位置:",red_x);
                // console.log("綠色盒子的X位置:",green_x);

                // 判斷是否驗證通過
                if (red_x <= (green_x + 2) && red_x >= (green_x - 2)) {
                    alert("驗證成功！")
                    console.log("驗證通過！");
                }
                else {
                    console.log("驗證失敗~~");
                    alert("驗證失敗~~");
                    // 刷新頁面
                    window.location.reload();
                }
            }
            // 重置布爾值
            isDown = false;
        }

2.2詳細(xì)代碼區(qū)域

2.2.1css代碼

    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wrap {
            width: 600px;
            height: 460px;
            margin: 50px;
        }

        .wrap-container {
            width: 600px;
            height: 400px;
            background-color: #ccc;
            /* 相對定位 */
            position: relative;
        }

        .wrap-container .bg {
            width: 600px;
            height: 400px;
            background-image: url(./images/1.jpg);
            background-size: cover;
        }

        .wrap-container .box {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 50px;
            box-shadow: 0px 0px 2px #fff;
        }

        .wrap-container .red {
            background-color: red;
            left: 0;
            /* 層級 */
            z-index: 1000;
            background-repeat: no-repeat;
        }

        .wrap-container .green {
            background-color: rgba(255, 255, 255, .5);
            left: 200px;
        }

        .wrap-side {
            width: 598px;
            height: 48px;
            background-color: #fff;
            margin-top: 10px;
            position: relative;
            border: 1px solid #ccc;
        }

        .wrap-side p {
            color: #666;
            text-align: center;
            line-height: 50px;
            /* 禁止選擇文本 */
            user-select: none;
        }

        .wrap-side ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 50px;
        }

        .wrap-side ul li {
            width: 50px;
            height: 50px;
            background-color: #1890FF;
            cursor: move;
            position: absolute;
            left: 0px;
            top: 0;
            text-align: center;
            line-height: 50px;
        }

        .wrap-side ul li::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-right: 2px solid #fff;
            border-top: 2px solid #fff;
            /* 旋轉(zhuǎn)屬性 */
            transform: rotate(45deg);
            /* 垂直對齊 */
            vertical-align: middle;
        }

        .wrap-side div {
            width: 0px;
            height: 50px;
            background-color: rgba(0, 191, 255, .5);
            position: absolute;
            left: 0px;
            top: 0;
        }
    </style>

2.2.2 html代碼

<div class="wrap">
        <div class="wrap-container">
            <div class="bg" style="background-image: url(./images/1.jpg);"></div>
            <div class="box red"></div>
            <div class="box green"></div>
        </div>
        <div class="wrap-side">
            <p>向右滑動</p>
            <!-- 滑動條 -->
            <ul>
                <li></li>
            </ul>
            <!-- 滑動經(jīng)過的地方設(shè)置背景 -->
            <div></div>
        </div>
    </div>

2.2.3 JS代碼

存放照片的數(shù)組中的照片路徑用戶可根據(jù)自己存放的路徑進(jìn)行修改（建議選擇尺寸一致的照片）。

// 1. 獲取頁面相關(guān)的元素
        var wrap = document.querySelector(".wrap");
        var wrapContainer = document.querySelector(".wrap-container");
        var bg = document.querySelector(".wrap-container .bg");
        var red = document.querySelector(".wrap-container .red");
        var green = document.querySelector(".wrap-container .green");
        var liElement = document.querySelector(".wrap-side ul li");
        var divElement = document.querySelector(".wrap-side div");

        // 采用數(shù)組記錄圖片路徑
        var arr = [
            '.\/images\/1.jpg',
            '.\/images\/2.jpeg',
            '.\/images\/3.jpg',
            '.\/images\/4.jpg',
            '.\/images\/5.jpg',
            '.\/images\/6.jpeg',
        ]

        // 2. 封裝函數(shù) 生成隨機(jī)數(shù)
        var getRdNum = function (min, max) {
            // 獲取指定范圍的隨機(jī)數(shù) 
            return Math.floor(Math.random() * (max - min) + min);
        }

        // 3. 記錄滑動所需的數(shù)據(jù)
        // 記錄.wrap標(biāo)簽的在頁面的位置
        var oLeft = wrap.offsetLeft;
        var oTop = wrap.offsetTop;

        // 記錄.wrap-container標(biāo)簽的尺寸
        var containerWidth = wrapContainer.offsetWidth;
        var containerHeight = wrapContainer.offsetHeight;

        // 記錄綠色標(biāo)簽和紅色標(biāo)簽的位置范圍
        // var min_slide_X = 0;
        var min_slide_X = containerWidth / 2;
        var max_silde_X = containerWidth - green.offsetWidth;
        var min_slide_Y = 0;
        var max_silde_Y = containerHeight - green.offsetHeight;

        // 記錄紅色標(biāo)簽可滑動的范圍
        var red_slide_X = containerWidth - red.offsetWidth;

        // 封裝函數(shù) 獲取綠色標(biāo)簽的隨機(jī)的位置
        var getPos = function () {
            // 返回坐標(biāo)
            return {
                x: getRdNum(min_slide_X, max_silde_X),
                y: getRdNum(min_slide_Y, max_silde_Y),
                x0: getRdNum(0, min_slide_X - red.offsetWidth)// 紅色標(biāo)簽的水平位置
            }
        }
        // 封裝函數(shù) 設(shè)置綠色/紅色盒子的位置
        var setPos = function () {
            var point = getPos();
            green.style['left'] = point.x + "px";
            green.style['top'] = point.y + "px";
            red.style['left'] = point.x0 + "px";
            red.style['top'] = point.y + "px";

            // 選擇.green標(biāo)簽區(qū)域?qū)?yīng)的圖片
            // 隨機(jī)的索引值
            var index = Math.floor(Math.random() * arr.length);
            var path = `url(${arr[index]})`;
            // 設(shè)置背景圖
            bg.style['backgroundImage'] = path;
            red.style['backgroundImage'] = path;
            // 計算出截取的部分圖片
            var posX = point.x;
            var posY = point.y;
            // 設(shè)置.red標(biāo)簽的背景圖位置
            red.style['backgroundPosition'] = `-${posX}px -${posY}px`;
        }
        setPos();

        // 記錄紅色標(biāo)簽當(dāng)前的位置
        var red_cur_X = parseInt(getComputedStyle(red)['left']);

        // 設(shè)置滑動條
        // 記錄滑塊的位置
        var x = 0;

        // 記錄鼠標(biāo)在滑塊中的位置
        var rx = 0;

        // 記錄滑塊當(dāng)前位置
        // var cx = 0;

        // 記錄紅色盒子的位置(和綠色盒子的位置進(jìn)行判斷)
        var red_x = 0;
        // 記錄綠色盒子的位置(獲取初始值即可)
        var green_x = parseInt(getComputedStyle(green)['left']);

        // 定義布爾值 判斷鼠標(biāo)是否按下
        var isDown = false;

        // 鼠標(biāo)按下滑塊
        liElement.onmousedown = function (e) {
            rx = e.pageX - wrap.offsetLeft;
            var mx = containerWidth - liElement.offsetWidth;
            isDown = true;//鼠標(biāo)按下
            // 鼠標(biāo)在頁面移動
            document.onmousemove = function (event) {
                // 計算出滑塊的位置(鼠標(biāo)在頁面的坐標(biāo) 減去  鼠標(biāo)在滑塊的坐標(biāo))
                // x = event.pageX - rx - liElement.offsetWidth  + cx;
                x = event.pageX - rx - liElement.offsetWidth;
                // 判斷是否超出滑動范圍
                if (x <= 0) x = 0;
                if (x >= mx) x = mx;
                // 設(shè)置滑塊的位置
                liElement.style["left"] = x + "px";
                divElement.style["width"] = x + "px";

                // 設(shè)置紅色標(biāo)簽的位置
                red_x = red_cur_X + x;
                console.log("red_x:", red_x);
                if (red_x >= (containerWidth - red.offsetWidth)) red_x = containerWidth - red.offsetWidth
                red.style["left"] = red_x + "px";


            }
        }
        // 鼠標(biāo)在頁面松開
        document.onmouseup = function () {
            // 解綁鼠標(biāo)移動事件
            document.onmousemove = null;
            // cx = x;

            //判斷鼠標(biāo)是否按下滑塊
            if (isDown) {
                // 檢查紅色和綠色標(biāo)簽的位置
                // console.log("紅色盒子的X位置:",red_x);
                // console.log("綠色盒子的X位置:",green_x);

                // 判斷是否驗證通過
                if (red_x <= (green_x + 2) && red_x >= (green_x - 2)) {
                    alert("驗證成功！")
                    console.log("驗證通過！");
                }
                else {
                    console.log("驗證失敗~~");
                    alert("驗證失敗~~");
                    // 刷新頁面
                    window.location.reload();
                }
            }

            // 重置布爾值
            isDown = false;
        }