当前位置：首页 > news >正文

Javascript 验证码

news 来源：原创 2024/5/2 7:33:03

需要用到验证码，突然想能否用js做验证码呢？
当然js不能作图，但是可以用js模拟做验证码的
于是花了20分钟按照我的想法尝试做，最后做出来比我想象中的效果还要好，呵呵
先贴个图看看

代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 无标题页 </ title >
     < style type ="text/css" >
        .code
         {
            background-image : url(code.jpg) ;
            font-family : Arial ;
            font-style : italic ;
            color : Red ;
            border : 0 ;
            padding : 2px 3px ;
            letter-spacing : 3px ;
            font-weight : bolder ;
         }
        .unchanged
         {
            border : 0 ;
         }
     </ style >
     < script language ="javascript" type ="text/javascript" >

      var code ; // 在全局定义验证码
      function createCode()
     {
       code = "" ;
        var codeLength = 6 ; // 验证码的长度
        var checkCode = document.getElementById( " checkCode " );
        var selectChar = new Array( 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); // 所有候选组成验证码的字符，当然也可以用中文的

        for ( var i = 0 ;i < codeLength;i ++ )
       {


        var charIndex = Math.floor(Math.random() * 36 );
       code += selectChar[charIndex];


       }
//        alert(code);
        if (checkCode)
       {
         checkCode.className = " code " ;
         checkCode.value = code;
       }

     }

       function validate ()
     {
        var inputCode = document.getElementById( " input1 " ).value;
        if (inputCode.length <= 0 )
       {
           alert( " 请输入验证码！ " );
       }
        else if (inputCode != code )
       {
          alert( " 验证码输入错误！ " );
          createCode(); // 刷新验证码
       }
        else
       {
         alert( " ^-^ OK " );
       }

       }

     </ script >
</ head >
< body >
< form   action ="#" >
       < input   type ="text"   onclick ="createCode()" id ="input1" />

     < input type ="text"   id ="checkCode" class ="unchanged" style ="width: 80px"    />< br />
     < input id ="Button1"   onclick ="validate();" type ="button" value ="确定" />  
</ form >
</ body >
</ html >

呵呵，高手看了还望别笑话，仅仅是为了练习而做着玩的（：
解释就不用说了，大家看注释应该就很清楚了
其实那个用来混淆文字的背景图只是在文字下方加了个背景图，验证码还是不能防止Copy的，所以基本是不能当真正的验证码用的。
这里设计到我最近学习js&css中的一些东西，呵呵，练习，学习，进步~