Question

每个人。我尝试完成我的验证码项目。我看到的唯一问题是找到一种方法，如何将数组 symbolString 更改为 pass 字符串（但.join（“”）不起作用）以及如何获取按键盘上的字母来字符串（功能 yourPass 也不起作用）。最后，将两个字符串（ pass 和键盘上的字符串）与“ ===“进行比较，并使用“确定”或“错误”文本打开警报。

感谢您的咨询！

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;
}

比较验证码中的字符串

0 个答案: