蓝桥杯18582-真人鉴定器
介绍
真人鉴定功能是一种常见的网络安全措施，用于保护网站免受机器人或自动化程序的恶意攻击。该功能基于人类视觉能力，要求用户在访问网站时通过切换右边轮播图，识别与左边要求的图片个数相符的图片，并点击"提交"按钮进行验证。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
txt
├── css
├── images
├── effect.gif
├── index.html
└── js
└── index.js其中：
css是样式文件夹。images是图片文件夹。effect.gif是最终效果图。index.html是主页面。js/index.js是待补充的代码 js 文件。
在浏览器中预览 index.html 页面效果如下：
目标
本题需修复验证码功能，使用户可以正常切换右边轮播图。找到 js/index.js 文件中的 changeBanner 函数，完善其中的 TODO 部分，目标如下：
该函数接收一个参数 isPre（布尔值）区分当前点击的按钮。点击上一页/下一页时修改全局变量 thisIndex（即图片的索引）正确显示对应的图片，共四张图片。
- 点击 "←"（
id=pre）按钮时，isPre为true，轮播图切换到上一页。若当前轮播图为第一页，则切换到最后一页（即第四页）。 - 点击 "→"（
id=next）按钮时，isPre为false，轮播图切换到下一页。若当前轮播图为最后一页（即第四页），则切换到第一页。
解题
vue
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>真人鉴定器</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main">
<p class="error">验证失败，请在右侧更换后重新提交！</p>
<h2>使用箭头来更换物体的数量，使其与左图相同。</h2>
<div class="content">
<div class="left">
<span id="num">2</span>
<span>X</span>
<img id="leftStar" src="./images/flower.svg" alt="" srcset="">
</div>
<div class="right">
<div class="banner">
<ul class="imgList">
<li>
<img src="./images/flower.svg" alt="">
<img src="./images/flower.svg" alt="">
<img src="./images/flower.svg" alt="">
</li>
<li>
<img src="./images/flower.svg" alt="">
</li>
<li>
<img src="./images/flower.svg" alt="">
<img src="./images/flower.svg" alt="">
</li>
<li>
<img src="./images/flower.svg" alt="">
<img src="./images/flower.svg" alt="">
<img src="./images/flower.svg" alt="">
<img src="./images/flower.svg" alt="">
</li>
</ul>
<div class="circle"></div>
<div class="toolbar">
<div id="pre"><img src="./images/left_arrow.svg" alt=""></div>
<div id="next"><img src="./images/right_arrow.svg" alt=""></div>
</div>
</div>
</div>
</div>
<button class="btn">提交</button>
</div>
</body>
<script src="./js/index.js"></script>
</html>
javascript
//inedx.js
window.onload = function () {
var imgList = document.querySelector(".imgList");
var circle = document.querySelector(".circle");
var thisIndex = 0;
var imgListLi = imgList.children;
var circleA = circle.children;
var flag = true;
imgList.style.width = imgList.children.length * 300 + "px";
/**
* 轮播图切换
* @param {*} isPre 是否上一页：true 上一页，false 下一页。
*/
function changeBanner(isPre) {
// TODO：待补充代码
if(isPre==true)
thisIndex!=0?thisIndex--:thisIndex=3;
}
if(isPre==false){
thisIndex!=3?thisIndex++:thisIndex=0;
}
// TODO: END
if (flag) {
flag = false;
slow(imgList, -thisIndex * 300, function () {
flag = true;
});
circleChange();
}
}
for (var i = 0; i < imgList.children.length; i++) {
var aNode = document.createElement("a");
aNode.setAttribute("index", i); //设置自定义属性
if (i == 0) {
aNode.className = "hover";
}
circle.appendChild(aNode);
}
circle.addEventListener("click", function (e) {
if (flag) {
flag = false;
if (e.target.nodeName != "A") {
return false;
}
thisIndex = e.target.getAttribute("index");
slow(imgList, -thisIndex * 300, function () {
flag = true;
});
circleChange();
}
});
document.querySelector("#pre").addEventListener("click", function () {
changeBanner(true);
});
document.querySelector("#next").addEventListener("click", function () {
changeBanner(false);
});
setImgStyle();
document.querySelector(".btn").addEventListener("click", function () {
const num = parseInt(document.querySelector("#num").innerText);
if (imgListLi[thisIndex].children.length == num) {
document.querySelector(".main").innerHTML = `<div class="success">
<img src="./images/success.svg" alt="">
<h2>验证完成！</h2>
<p>您已经证明您是人类。请继续操作。</p>
</div>`;
} else {
document.querySelector(".error").style = "opacity: 1;";
}
});
// 设置图片的样式
function setImgStyle() {
var numEl = document.querySelector("#num");
var fontSize = Math.floor(Math.random() * 10 + 20);
var numElAngle = Math.floor(Math.random() * 60 - 30);
numEl.style = `font-size:${fontSize}px;
transform: rotate(${numElAngle}deg);
-moz-transform: rotate(${numElAngle}deg);
-webkit-transform: rotate(${numElAngle}deg);
-o-transform: rotate(${numElAngle}deg)`;
var photo = document.querySelectorAll(".imgList img");
for (var i = 0; i < photo.length; i++) {
var width = Math.floor(Math.random() * 100 + 40);
var left = Math.floor(Math.random() * 760 + 40);
var top = Math.floor(Math.random() * 400);
var angle = Math.floor(Math.random() * 60 - 30);
let s = `left:${left}px;
width:${width}px;
top :${top}px;
transform: rotate(${angle}deg);
-moz-transform: rotate(${angle}deg);
-webkit-transform: rotate(${angle}deg);
-o-transform: rotate(${angle}deg)`;
photo[i].style = s;
}
}
/**
* 分页器样式切换
*/
function circleChange() {
for (var i = 0; i < circleA.length; i++) {
circleA[i].className = "";
}
circleA[thisIndex].className = "hover";
}
/**
* 轮播图位置移动
* @param {*} obj
* @param {*} target
* @param {*} callback
*/
function slow(obj, target, callback) {
obj.myInter = setInterval(function () {
var offsetLeft = obj.offsetLeft;
var num = (target - offsetLeft) / 10;
num > 0 ? (num = Math.ceil(num)) : (num = Math.floor(num));
if (offsetLeft == target) {
clearInterval(obj.myInter);
callback && callback();
} else {
obj.style.left = offsetLeft + num + "px";
}
}, 10);
}
};