JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)詳細(xì)代碼

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

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

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

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

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

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

一、效果展示

·效果示例圖

二、代碼區(qū)域

2.1 核心代碼區(qū)域

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

// 鼠標(biāo)按下滑塊
        liElement.onmousedown = function (e) {
            rx = e.pageX - wrap.offsetLeft;
            var mx = containerWidth - liElement.offsetWidth;
            isDown = true;//鼠標(biāo)按下
            // 鼠標(biāo)在頁(yè)面移動(dòng)
            document.onmousemove = function (event) {
                // 計(jì)算出滑塊的位置(鼠標(biāo)在頁(yè)面的坐標(biāo) 減去  鼠標(biāo)在滑塊的坐標(biāo))
                // x = event.pageX - rx - liElement.offsetWidth  + cx;
                x = event.pageX - rx - liElement.offsetWidth;
                // 判斷是否超出滑動(dòng)范圍
                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)在頁(yè)面松開(kāi)時(shí)，判斷滑塊是否到達(dá)缺口的檢測(cè)范圍內(nèi)，誤差為2px。

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

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

                // 判斷是否驗(yàn)證通過(guò)
                if (red_x <= (green_x + 2) && red_x >= (green_x - 2)) {
                    alert("驗(yàn)證成功！")
                    console.log("驗(yàn)證通過(guò)！");
                }
                else {
                    console.log("驗(yàn)證失敗~~");
                    alert("驗(yàn)證失敗~~");
                    // 刷新頁(yè)面
                    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;
            /* 相對(duì)定位 */
            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;
            /* 層級(jí) */
            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);
            /* 垂直對(duì)齊 */
            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>向右滑動(dòng)</p>
            <!-- 滑動(dòng)條 -->
            <ul>
                <li></li>
            </ul>
            <!-- 滑動(dòng)經(jīng)過(guò)的地方設(shè)置背景 -->
            <div></div>
        </div>
    </div>

2.2.3 JS代碼

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

// 1. 獲取頁(yè)面相關(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. 記錄滑動(dòng)所需的數(shù)據(jù)
        // 記錄.wrap標(biāo)簽的在頁(yè)面的位置
        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)簽可滑動(dòng)的范圍
        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;
            // 計(jì)算出截取的部分圖片
            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è)置滑動(dòng)條
        // 記錄滑塊的位置
        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)在頁(yè)面移動(dòng)
            document.onmousemove = function (event) {
                // 計(jì)算出滑塊的位置(鼠標(biāo)在頁(yè)面的坐標(biāo) 減去  鼠標(biāo)在滑塊的坐標(biāo))
                // x = event.pageX - rx - liElement.offsetWidth  + cx;
                x = event.pageX - rx - liElement.offsetWidth;
                // 判斷是否超出滑動(dòng)范圍
                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)在頁(yè)面松開(kāi)
        document.onmouseup = function () {
            // 解綁鼠標(biāo)移動(dòng)事件
            document.onmousemove = null;
            // cx = x;

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

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

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

三、個(gè)人總結(jié)

實(shí)現(xiàn)該功能運(yùn)用了鼠標(biāo)點(diǎn)擊事件及鼠標(biāo)松開(kāi)事件，其中需要濾清如何獲取滑塊在照片中的位置以及如何將底部滑塊與左側(cè)滑塊的坐標(biāo)相聯(lián)系，這是此案例的關(guān)鍵所在。

到此這篇關(guān)于JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS滑動(dòng)驗(yàn)證實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: