js 인증 코드 기능 구현

본 논문 의 사례 는 js 가 인증 코드 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
\#앞 에 서 는 분해 해서 말 하 는 것 입 니 다.보고 싶 지 않 으 면 바로 넘 어 갈 수 있 습 니 다.주석 이 있 는 전체 코드 와 효 과 는 뒤에 있 습 니 다.
먼저 페이지 에 입력 상자 와 인증 코드 를 표시 하 는 상자,제출 단 추 를 준비 합 니 다.


<body>
 <input type="text">
 <div></div>
 <button>  </button>
</body>

그리고 스타일 링 을 좀 넣 어 볼 게 요.


input {
 width: 150px;
 height: 30px;
 outline: none;
 font-size: 24px;
 vertical-align: middle;
}

button {
 outline: none;
 vertical-align: middle;
 cursor: pointer;
}

div {
 display: inline-block;
 width: 90px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 vertical-align: middle;
 background-color: #ddd;
 cursor: pointer;
}

그리고 대충 이렇게 생 겼 어 요.

자,그럼 js 를 쓰 겠 습 니 다.
우선 이 요소 들 을 가 져 옵 니 다.


var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

그리고 문자 라 이브 러 리 와 인증 코드 를 저장 하 는 문자열 을 만 듭 니 다.


var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;

그 문자 라 이브 러 리 는 바로 건반 을 굴 리 면 됩 니 다.
인증 코드 는 랜 덤 수 를 여러 번 사용 해 야 하기 때문에 편 의 를 위해 랜 덤 수의 함 수 를 먼저 만 듭 니 다.


function getRandom(l, r) {
 return parseInt(l + Math.random() * (r - l + 1));
}

인증 코드 이기 때문에 생 성 된 텍스트 를 직접 선택 하여 복사 할 수 없 기 때문에 선택 할 수 없 는 텍스트 를 추가 합 니 다.


div.addEventListener('selectstart', function (e) {
 e.preventDefault();
})

인증 코드 는 페이지 를 새로 고 칠 때마다 한 번 생 성 되 는 것 이 아니 라 바 꿀 수 있 는 것 이 잘 보이 지 않 기 때문에 여러 번 생 성 되 어야 하기 때문에 인증 코드 를 생 성 하 는 부분 을 한 함수 에 씁 니 다.


function run() {
 str = '';
 while (div.hasChildNodes()) {
 div.removeChild(div.firstChild);
 }
 for (var i = 0; i < 4; i++) {
 var span = document.createElement('span');
 span.innerHTML = characters[getRandom(0, characters.length - 1)];
 span.style.display = 'inline-block';
 span.style.fontSize = getRandom(16, 32) + 'px';
 span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
 span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
 str += span.innerHTML;
 div.appendChild(span);
 }
}

대충 이 부분 을 설명 하 자 면 원 리 는 대략 4(내 가 만 든 것 은 4 자리 의 인증 코드)개의 span 을 만 든 다음 에 텍스트,글꼴 크기,글꼴 색상,이동 회전 등 을 무 작위 로 설정 한 다음 에 span 을 div 에 div 의 하위 노드 로 추가 한 다음 에 str 변수 에 인증 코드 의 문 자 를 저장 하 는 것 을 잊 지 마 세 요.
매번 생 성 되 기 전에 지난번 에 생 성 된 인증 코드 를 삭제 하고 str 를 초기 화 합 니 다.
그리고 페이지 새로 고침 시 한 번 생 성(호출 한 번),div 를 클릭 할 때마다 다시 생 성(호출 한 번 클릭)


run();
div.addEventListener('click', run);

제출 버튼 에 클릭 이벤트 추가:입력 한 인증 코드 가 맞 는 지 판단 한 다음 인증 코드 를 새로 고치 고 입력 상자 의 텍스트 를 자동 으로 삭제 합 니 다.


btn.addEventListener('click', function () {
 if (input.value.toLowerCase() == str.toLowerCase()) {
 alert('    ');
 } else {
 alert('    ');
 }
 run();
 input.value = '';
})

판단 인증번호 여기 대소 문 자 를 구분 하지 않 으 려 고 toLowerCase()함수 로 두 문자열 을 모두 소문 자로 바 꿔 서 비교 해 봤 습 니 다.
이로써 기능 이 모두 실현 되 는 차 이 는 많 지 않다.
효과 보기:

설명 이 있 는 전체 버 전 코드 는 다음 과 같 습 니 다.


<!DOCTYPE html>
<html lang="ch-ZN">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js     </title>
 <style>
 input {
  width: 150px;
  height: 30px;
  outline: none;
  font-size: 24px;
  vertical-align: middle;
 }

 button {
  outline: none;
  vertical-align: middle;
  cursor: pointer;
 }

 div {
  display: inline-block;
  width: 90px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  background-color: #ddd;
  cursor: pointer;
 }
 </style>
</head>

<body>
 <input type="text">
 <div></div>
 <button>  </button>
 <script>
 //     
 var input = document.querySelector('input');
 var btn = document.querySelector('button');
 var div = document.querySelector('div');

 //       
 var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
 var str; // str          

 //      [l,r]           
 function getRandom(l, r) {
  return parseInt(l + Math.random() * (r - l + 1));
 }

 //         
 div.addEventListener('selectstart', function (e) {
  e.preventDefault();
 })

 //         
 function run() {

  //    str
  str = '';

  //    div       
  while (div.hasChildNodes()) {
  div.removeChild(div.firstChild);
  }

  //              
  for (var i = 0; i < 4; i++) {

  //     span  
  var span = document.createElement('span');

  //     （            ）
  span.innerHTML = characters[getRandom(0, characters.length - 1)];

  //          
  span.style.display = 'inline-block';
  span.style.fontSize = getRandom(16, 32) + 'px';
  span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
  span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
  str += span.innerHTML; // str    
  div.appendChild(span); //  span   div 
  }
 }


 run(); //     /          
 div.addEventListener('click', run); //               

 //         
 btn.addEventListener('click', function () {
  if (input.value.toLowerCase() == str.toLowerCase()) {
  alert('    ');
  } else {
  alert('    ');
  }
  run();
  input.value = '';
 })
 </script>
</body>

</html>

이상
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 인증 코드 기능 구현

좋은 웹페이지 즐겨찾기