이미지 인증코드 기능을 구현하기 위한 순수 JS 코드(IE6-8 호환)-JS 튜토리얼-php.cn

이미지 인증코드 기능을 구현하기 위한 순수 JS 코드(IE6-8 호환)

零下一度

풀어 주다： 2017-04-19 18:02:42

원래의

2094명이 탐색했습니다.

이 글은 이미지 인증코드 기능을 구현하기 위한 순수 JS를 주로 소개하며, IE6-8 브라우저와 호환이 가능합니다. 필요하신 분들은 참고하시면 됩니다.

최근 사진 인증코드 기능을 구축하고 싶습니다. , 하지만 코드 뒤에 직접 작성하고 싶지는 않습니다. 그래서 순수 프론트엔드 인증코드 기능을 구축하려고 하다가 온라인으로 검색해보니 gVerify.js라는 플러그인을 발견했는데, 간단하고 사용하기 쉬우며 완벽하게 구현되어 있었습니다. 그런데 나중에 IE8과 호환된다는 메시지를 받고 생각만 해도 취하게 됐다. IE는 끔찍하지만 괜찮습니다. 플러그인을 찾을 생각은 없고, 지식을 배우고 강화하는 데 사용할 계획입니다. 아래에서 제가 한 방법을 참조하세요. 시간이 좀 걸렸지만 그만한 가치가 있었습니다.

사용방법

p-인증코드 입력란을 정의하고, 다운로드한 js 플러그인을 소개하고, 사용방법은 매우 간단합니다. GVerify 객체를 생성합니다. 매개변수를 사용자 정의하거나 p의 ID를 전달할 수 있습니다. 그러면 인증코드가 생성되고, 아래 그림 1-1과 같이 효과가 나타납니다. > 효과가 꽤 좋습니다. 몇 분만에 완료되었으며, 다양한 브라우저를 클릭해도 문제가 없었습니다. 하지만 일단 IE에 도달하면 IE9는 여전히 유용하지만 IE8은 어떻게 구현되는지 볼 수 있습니다. 그래서 소스코드를 열어보니 IE8 이하에서는 지원하지 않는 캔버스로 구현되어 있는 것을 발견했습니다. 그런 다음 캔버스 요소에 대한 관련 소개를 보러 가서 정말 속았다는 것을 알았습니다. "우리는 IE에서

수정

정보를 확인해보니 createelement() 메소드 플러그인 캔버스가 IE8 이하에서는 지원되지 않는 것으로 나타났습니다. 먼저 추가하세요. 페이지에 캔버스 요소를 작성하세요. 그래서 페이지를 수정하고 얻을 수 있는 캔버스를 생성하는 코드를 수정했습니다. 그리고 소스코드에 몇 가지 설명을 추가했습니다. 사용방법이 다음과 같이 변경되었습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图形验证码</title>
  </head>
  <body>
    <p id="v_container" style="width: 200px;height: 50px;"></p>
    <input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
  </body>
  <script src="js/gVerify.js"></script>
  <script>
    var verifyCode = new GVerify("v_container");

    document.getElementById("my_button").onclick = function(){
      var res = verifyCode.validate(document.getElementById("code_input").value);
      if(res){
        alert("验证正确");
      }else{
        alert("验证码错误");
      }
    }
  </script>
</html>

로그인 후 복사

소스코드가 다음과 같이 수정되었습니다(빨간색이 수정된 부분) 및 코멘트:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图形验证码</title>
  </head>
  <body>
　　　　　　<p id="v_container" style="width: 100px;height: 40px;position: relative;top: -61px;left: 230px;">
　　　　　　　　<canvas id="verifyCanvas" width="100" he.ight="40" style="cursor: pointer;"></canvas>
　　　　　　</p>
　　　　　　<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
  </body>
  <script src="js/gVerify.js"></script>
  <script>
    var verifyCode = new GVerify("v_container");
    document.getElementById("my_button").onclick = function(){
      var res = verifyCode.validate(document.getElementById("code_input").value);
      if(res){
        alert("验证正确");
      }else{
        alert("验证码错误");
      }
    }
  </script>
</html>

로그인 후 복사

요약

　1. IE의 캔버스를 지원하려면 wxcanvas.js를 도입하고 캔버스 요소를 얻을 수 있도록 소스 코드를 수정해야 합니다.

2. html에 p 및 canvas 요소를 추가합니다.

인증번호 다시 보여주세요 ㅎㅎ

위 내용은 이미지 인증코드 기능을 구현하기 위한 순수 JS 코드(IE6-8 호환)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!