javascript - 比较验证码中的字符串
问题描述
每个人。我尝试完成我的验证码项目。我看到的唯一问题是找到一种方法如何更改数组symbolString以传递字符串(但 .join("") 不起作用)以及如何将键盘上按下的字母转换为字符串(函数yourPass不起作用也)。最后将两个字符串(从键盘传递和字符串)与“===”进行比较,并用“OK”或“Wrong”文本打开警报。
谢谢你的建议!
JS代码:
window.addEventListener('DOMContentLoaded', newSymbols, false);
function newSymbols() {
let pos1 = document.getElementById('1');
let pos2 = document.getElementById('2');
let pos3 = document.getElementById('3');
let pos4 = document.getElementById('4');
let pos5 = document.getElementById('5');
let symbolsArray = [pos1, pos2, pos3, pos4, pos5];
let symbolString = [];
for (let i = 0; i <= 4; i++) {
let highLow = Math.random();
// 50/50 chance for getting digit or letter
if (highLow < 0.5) {
let mySign = Math.ceil(Math.random() * 9 + 48); // digits
symbolsArray[i].innerHTML = `&#${mySign}`;
symbolString.push(String.fromCharCode(mySign));
}
else {
let mySign = Math.ceil(Math.random() * 25 + 65); // Upper-case letters only
symbolsArray[i].innerHTML = `&#${mySign}`;
symbolString.push(String.fromCharCode(mySign));
}
let inputColor = ['pink', 'red', 'blue', 'green', 'cyan', 'darkblue', '#563412', '#d6db54'];
let randomColor = Math.floor(Math.random() * 8);
symbolsArray[i].style.color = `${inputColor[randomColor]}`;
/* To control every symbol independently */
let x = Math.floor(Math.random() * 10 + 15);
let y = Math.floor(Math.random() * 5 + 10);
let z = Math.floor(Math.random() * 20 - 10);
symbolsArray[i].style.transform = `translate(${x}px,${y}px) rotate(${z}deg)`;
}
let pass = symbolString.join("");
var theText = document.getElementById('codearea');
if(theText){
theText.addEventListener('keydown', yourPass, false);
}
function yourPass(event){
if(theText){
var textString = String.fromCharCode(event.keyCode);
}
return textString;
}
let compare = (pass, textString) => pass === theText ? alert("OK") : alert("Wrong");
let clickButton = document.getElementById('btn');
if(clickButton){
clickButton.addEventListener('click', compare, false);
}
return symbolsArray;
}
document.getElementById('update').addEventListener('click', newSymbols, false);
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My New Pen!</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="container">
<div class="captcha" id="anycode">
<div class="something">
<div class="symbol" id="1"></div>
<div class="symbol" id="2"></div>
<div class="symbol" id="3"></div>
<div class="symbol" id="4"></div>
<div class="symbol" id="5"></div>
</div>
<div class="rewrite" id="update" onclick="newSymbols();"></div>
</div>
<div class="captcha answer">
<input type="text" class="yourcode" id="codearea" placeholder="Click and write your code here" value=""/>
<input type="button" class="btn" id="btn" value="Submit" />
</div>
<footer>Made by Krzych 2018</footer>
</div>
<script src="scripts/index.js"></script>
</body>
</html>
CSS 代码:
html, body {
width: 1200px;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #234567;
}
.container {
position: absolute;
width: 800px;
min-height: 200px;
height: auto;
left: 25%;
background-color: #6893bf;
}
.captcha, .answer {
width: 400px;
height: 100px;
margin: 10px 25%;
background-color: #ffdfdf;
float: left;
}
.something {
position: relative;
width: 75%;
height: auto;
float: left;
}
.logo {
width: auto;
position: relative;
top: 15%;
float: left;
}
.symbol {
width: 15%;
height: inherit;
font: normal 60px Tahoma sans-serif;
background-color: transparent;
float: left;
}
.symbol:nth-child(3) {
width: 0.8em;
}
.rewrite {
width: 100px;
height: inherit;
background-color: #a5e8b2;
float: right;
}
.answer {
width: 400px;
height: auto;
margin: 10px 25% 30px;
background-color: white;
float: left;
}
.yourcode {
width: 74%;
height: 1.55em;
line-height: 1em;
float: left;
}
.btn {
width: 25%;
height: 2em;
float: left;
}
footer {
width: auto;
min-height: 1.5em;
height: 40px;
padding: 5px 8px;
background-color: beige;
font: italic 20px Helvetica;
clear: both;
}
解决方案
推荐阅读
- graph - 如何将表格导出为 png 文件?
- python - 无法从 JWT 导入 TokenObtainPairView、TokenRefreshView
- javascript - 如何让 Chrome 扩展程序休眠一段时间并在端口上发布消息
- python - 优化大型excel文件的处理
- javascript - 如何使用javascript为每个表行打印不同的值
- ide - Liferay Cloud IDE,多个开发人员在同一个 liferay 服务器上工作
- php - Laravel 将退出状态代码任意设置为自定义命令
- ios - 旋转图像后缺少缩放
- sql-server - 计算日期范围内的星期六数 - SQL
- javascript - 减少条件未定义的回报