生成验证码

<body>
   <input type="text" id="inputCode"/>
    <br/><br/>
    <div id="code"></div>
    <br/><br/>
    <input type="button" value="submit" id="buttonCode"/>
    
    <script type="text/javascript">
       //随机生成四位验证码，并且添加到指定的DIV当中
      function createCode(){
         var code="";
         //定义获取验证码的范围
         var str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
         //循环4次，生成四个随机字符，累加到code中，这样code就是我们要获取的验证码
         for(var i=0;i<4;i++){
            //随机生成0-61之间的随机整数
            var num=Math.round(Math.random()*(61-0)+0);
            //根据随机索引获取指定的字符
            var s=str.charAt(num);
            code=code+s;
         }
         document.getElementById("code").innerHTML=code;
      }
      //页面刷新调用方法，重新生成验证码
       createCode();
      //给DIV绑定点击事件，点击的时候生成验证码
      document.getElementById("code").onclick=function(){
         createCode();  
      };
      
      
      var oInput=document.getElementById("inputCode");
      var oButton=document.getElementById("buttonCode");
      oButton.onclick=function(){
         var value=oInput.value;
         var code=document.getElementById("code").innerHTML;
         //为了不区分大小写，我们把两个值全部的转化成小写（大写也一样）
         if(value.toLowerCase()==code.toLowerCase()){
            alert("相等");   
         }else{
            alert("验证码不相等，请重新输入！");    
         }
      };
      
      
      
      
       //页面加载的时候，随机生成四位的验证码(四位验证码字符不能有重复的)，将验证码显示在指定的位置，并且存储在本地的Cookie信息中
      //在给验证码绑定看不清楚换一张的点击效果，点击的时候从新按照上面的规则生成新的四位验证码
      //给提交按钮绑定点击事件，点击的时候获取自己输入的文本框中的内容(要把内容中的最后一个空格去掉)，而且在输入的过成中，我们只允许用户输入4位
      //从cookie中获取我们存储的验证码信息，然后和自己输入的进行比较(如果不区分大小写的话，都把内容转化成小写就可以了)
      //如果判断成功，我们就提示或者进行其他的处理
      //如果不成功，我们清空文本框内容，四位随机验证码要重新的获取
      
      
      
      
      
      
      
    </script>
</body>
posted on 2016-10-27 10:20 晓星空阅读(654) 评论(0) 收藏举报