JavaScript实现点击文字验证

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>txt</title><style type="text/css">* {padding: 0;margin: 0;}div {width: 1200px;height: 600px;border: 1px solid red;position: relative;}.txt {border: 1px solid #000000;border-radius: 1rem;width: 30px;height: 30px;position: absolute;text-align: center;line-height: 30px;color: #FF0000;}.divTxt {width: 50px;height: 50px;border: 1px solid #00FFFF;position: absolute;text-align: center;line-height: 50px;font-size: 20px;}.Tip {position: absolute;width: 350px;height: 35px;text-align: center;font-size: 18px;line-height: 35px;}</style></head><body><div></div><div class="Tip"></div><script type="text/javascript">let div1 = document.querySelector('div')let arrs = ['儒雅随和', '口吐芬芳', '气定神闲', '钢筋直男', '难上加难', '超级加倍', '粗鄙之语', '强人锁男', '我全都要']let x= 0, y= 0;let index = Math.floor(Math.random()*arrs.length-1)+1let randTop = Math.floor(Math.random()*600)+1let randLeft = Math.floor(Math.random()*1200)+1let arrtxt = ''for (let i in arrs[index]) {arrtxt += arrs[index][i]let divTxt = document.createElement('div')divTxt.innerText = arrs[index][i]divTxt.classList.add('divTxt')divTxt.style.left = (Math.floor(Math.random()*1200)+1)-25 + 'px'divTxt.style.top =  (Math.floor(Math.random()*600)+1)-25 + 'px'div1.appendChild(divTxt)}let i= 0, newstr= '';let tempElement = []let tip = document.querySelector('.Tip')tip.innerText = '请按照当前成语依次点击文字--'+arrtxtdiv1.addEventListener('click',(e)=>{i++let addDiv = document.createElement('div')addDiv.classList.add('txt')addDiv.innerText = iaddDiv.setAttribute('style','left: '+(e.clientX - 16)+'px; top:'+(e.clientY - 16)+'px;')div1.appendChild(addDiv)tempElement.push(addDiv);if (e.target.innerText.length = 1) {newstr += e.target.innerText}if (arrtxt == newstr){alert('验证成功')}else{if (newstr.length >4){// for(let i=0;i<tempElement.length;i++){//   div1.removeChild(tempElement[i]);// }newstr = ''}if (tempElement.length === 4){// console.log('操作错误')alert('验证失败')for(let i=0;i<tempElement.length;i++){div1.removeChild(tempElement[i]);}tempElement= []i= 0;newstr = ""}}})</script></body>
</html>

效果图如下：

如果正确：

失败则相反

JavaScript实现点击文字验证相关推荐

javascript顺序点击文字验证
效果图: 实现思路: 随机在文字库取一个成语生成点击的文字随机生成文字的坐标, 刷新更换文字...详看代码注释注:中间有些逻辑不对,坐标获取会跑出去,如果有更好的意见欢迎留言 <!DOCT ...
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 如图点击下载解压 ...
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 ...
HTML复选框，点击文字，对应的复选框选中
HTML怎么添加,点击文字,对应的复选框选中的效果呢? 将对应的文字用label标签包起来,然后加上for属性指向复选框的id即可! <!DOCTYPE html> <html> ...
仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改
思路来源:昨天看淘宝的图片空间,发现了一个效果. 点击宝贝的名字,出现一个可编辑的文本框,然后ajax提交(如果数据变的话),改变数据看图说明: 编辑完了提交进行修改数据自己做的代码效果如下: 具 ...
HTML选中时闪动效果代码,JS实现点击文字对应DIV层不停闪动效果的方法
本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错 ...

JavaScript实现点击文字验证

JavaScript实现点击文字验证相关推荐

最新文章

热门文章