javascript顺序点击文字验证

效果图：

实现思路：

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

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

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

<!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>

javascript顺序点击文字验证相关推荐

JavaScript实现点击文字验证
代码如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
Python破解携程点击文字验证
本次使用到的知识 Python selenium模块百度通用文字识别SDK的调用,api自己去申请,每天最多50次免费调用,文档地址:http://ai.baidu.com/docs#/OCR-AP ...
使用jquery实现图形点击文字按顺序验证码案例及代码完整版
首先进入这个网站:https://www.51qianduan.com 搜索验证码网站为https://www.51qianduan.com/article/10774.html 如图点击下载解压 ...
使用selenium自动登陆b站图片文字验证识别
文章目录前言一. 反,反反爬虫 1.反爬虫 2.反反爬虫二,超级鹰三.完整代码 1.导包 2.超级鹰接口 3.连接手动开启的浏览器 4.定位文本框标签 5.图片文字识别 6.文本处理,坐标处理 ...
html点击按钮动复制推广地址,JavaScript实现点击按钮就复制当前网址
JavaScript实现点击按钮就复制当前网址点击按钮复制当前网址: 在大量的网站都有这样的功能,当点击一个按钮的时候可以复制当前页面的地址,以此可以方便网站用户对链接的存储,同时也便于网站的推广, ...
点击文字可以选中相应的checkbox
点击文字可以选中相应的checkbox (2008-11-22 14:16:40) 转载▼ 标签: 杂谈分类: javascript 转载: 这是一个例子: <html> <hea ...
点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
php中表单的非空验证,Javascript的表单与验证-非空验证_javascript技巧
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...
HTML复选框，点击文字，对应的复选框选中
HTML怎么添加,点击文字,对应的复选框选中的效果呢? 将对应的文字用label标签包起来,然后加上for属性指向复选框的id即可! <!DOCTYPE html> <html> ...

javascript顺序点击文字验证

javascript顺序点击文字验证相关推荐

最新文章

热门文章