當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript顺序点击文字验证
生活随笔
收集整理的這篇文章主要介紹了
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顺序点击文字验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华大单片机移植TencentOS
- 下一篇： 一文入门 Spring Cloud Te