javascript顺序点击文字验证_依次选择文字进行验证-CSDN博客

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个文字验证系统。随机从成语库中选取成语，动态生成可点击的文字，用户需按顺序点击文字进行验证。当用户点击正确的文字时，文字变色，全部正确后显示验证成功信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现思路：

随机在文字库取一个成语生成点击的文字

随机生成文字的坐标, 刷新更换文字...详看代码注释

注：中间有些逻辑不对，坐标获取会跑出去，如果有更好的意见欢迎留言

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>文字验证</title>

        <style>
            .box {
                width: 500px;
                height: 300px;
                position: relative;
                box-shadow: 1px 1px 5px #2e2e2e;
                margin: 80px auto;
            }

            /* 上面盒子 */
            .topbox {
                position: relative;
            }

            /* 图片 */
            .topboximg {
                width: 100%;
                height: 210px;
                /* padding: 24px; */
            }

            /* 刷新 */
            .refresh {
                position: absolute;
                right: 4px;
                top: 0px;
                color: white;
                font-weight: bolder;
                font-size: 30px;
                cursor: pointer;
            }

            /* 文字 */
            .toptext {
                /* position: relative; */
                display: flex;
                justify-content: space-between;

                cursor: pointer;
            }

            .textspan {
                position: absolute;
                top: 0;
                left: 0;
            }

            .toptext > span {
                color: rgb(204, 255, 0);
                font-weight: 500;
                font-size: 18px;
            }

            /* 下面盒子 */
            .bottombox {
                width: 450px;
                height: 50px;
                border: 1px solid #f7f4f4;
                background-color: #fffcfc;
                box-shadow: 1px 1px 3px #ccc;
                position: absolute;
                bottom: 20px;
                left: 24px;
                text-align: center;
                line-height: 50px;
            }

            .bottombox > span {
                text-align: center;
                line-height: 50px;
                font-size: 16px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <!-- 上面盒子 -->
            <div class="topbox">
                <!-- 图片 -->
                <img class="topboximg" src="https://img2.baidu.com/it/u=904906806,3927953455&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500" alt="" />

                <!-- 刷新 -->
                <div class="refresh">↺</div>

                <!-- 文字 -->
                <div class="toptext">
                    <span class="textspan">大</span>
                    <span class="textspan">威</span>
                    <span class="textspan">天</span>
                    <span class="textspan">龙</span>
                </div>
            </div>

            <!-- 下面盒子 -->
            <div class="bottombox">
                <span class="spanx">请依次点击图片中的文字</span>
            </div>
        </div>

        <script>
            // <顺序点击文字验证>
            // 随机在文字库取一个成语生成点击的文字

            // 功能实现：随机数 随机文字 刷新更换文字

            //文字库
            var textData = ["一马平川", "鹰击长空", "万家灯火", "厚德载物", "欣欣向荣"];

            var box = document.querySelector(".box");
            // 上面盒子
            var topbox = document.querySelector(".topbox");
            // 下面盒子
            var bottombox = document.querySelector(".bottombox");
            // 成语文字
            var textspan = document.querySelectorAll(".textspan");
            // 刷新按钮
            var refresh = document.querySelector(".refresh");
            // 图片
            var topboximg = document.querySelector(".topboximg");
            // 下面字
            var spanx = document.querySelector(".spanx");

            // 获取图片宽高
            var imgWidth = topboximg.clientWidth;
            var imgHight = topboximg.clientHeight;
            var textspanW = textspan[0].clientWidth;
            var textspanH = textspan[0].clientHeight;

            console.log(refresh);

            var clickindex = -1;
            var clicktrue = false;

            // (刷新更换文字功能)
            var foor = (refresh.onclick = function () {
                console.log(666);
                refresh.style.color = "yellow";
                // (点击更换颜色功能)
                clickindex = -1;
                textspan.forEach(function (item, index) {
                    item.onclick = function () {
                        item.style.backgroundColor = "blue";
                        // console.log("更换成功");
                        console.log(item.innerText);

                        clickindex += 1;

                        // 判断验证是否成功
                        if (str[clickindex] == item.innerText) {
                            console.log(str[clickindex]);
                            clicktrue = true;
                        } else {
                            console.log("不匹配");
                            clicktrue = false;
                        }
                        if (clickindex == 3) {
                            if (clicktrue) {
                                console.log("输出成功");
                                bottombox.innerHTML = "验证成功！";
                                bottombox.style.backgroundColor = "skyblue";
                            } else {
                                console.log("失败");
                                bottombox.innerHTML = "验证失败,请重试";
                                bottombox.style.backgroundColor = "yellow";
                            }
                        }
                    };
                    item.style.backgroundColor = "";
                });

                refresh.onmouseleave = function () {
                    refresh.style.color = "white";
                    console.log("鼠标移出了");
                };
                // refresh.onclick();
                // 获取随机数
                var random = Math.floor(Math.random() * textData.length);
                console.log(random);
                // 截取字符串
                var str = textData[random].split("");
                console.log(str);
                for (var i = 0; i < str.length; i++) {
                    textspan[i].textContent = str[i];
                    console.log(str[i]);
                }

                // (随机文字坐标功能)
                // var idiom = [];
                textspan.forEach(function (item) {
                    // item.onclick = function () {
                    var left = Math.floor(Math.random() * imgWidth - textspanW);
                    var top = Math.abs(Math.floor(Math.random() * imgHight - textspanH) - 10);
                    item.style.left = left + "px";
                    item.style.top = top + "px";
                    console.log(left);
                    // }
                });
                var react = topbox.getBoundingClientRect();
                console.log(react);
                // 下面文字绑定上面文字
                bottombox.innerText = "请依次点击图片中的" + str;
            });
        </script>
    </body>
</html>