客户端技术大牛揭秘了 Js也能实现验证码

 

很多时候我们生成验证码都是在服务器生成的，但是你知不知道其实在客户端用js也可能用来生成验证码呢，今天客户端大牛就来揭密，如何使用js方便地在浏览器上生成验证码，从而降低服务器的压力，下面就是一段技术代码，每位想要学习的就快点来过围观吧。

 

function validate()
{
/*    var str="";
    var code = form1.CODE.value;
 var spans = document.getElementById("divCode").all;
 for(var i=0;i<4;i++)
    str = str+spans[i].innerHTML;
    if(str != code)
   alert("输入验证码有误!");*/

     var sso =getCookie("sso_code");
  var str= sso.toString();
  var temp = "";
  for(var i=0;i<str.length;i++)
  {
     if(str.charAt(i) != ',')
  temp = temp+str.charAt(i);
  }
     alert(temp);
     var code = form1.CODE.value;
  alert(code);
     if(code != temp)
    alert("输入验证码有误!");
}
function validteCode()
{
    var codes = newArray(4);       //用于存储随机验证码
    var colors = new Array("Red","Green","Gray","Blue","Maroon","Aqua","Fuchsia","Lime","Olive","Silver");
    for(var i=0;i < codes.length;i++)
    {//获取随机验证码
        codes[i] =Math.floor(Math.random()*10);
    }

    //把随机生成的值存储在cookie里。
    setCookie("sso_code",codes);
    var spans =document.getElementById("divCode").all;
    for(var i=0;i<spans.length;i++)
    {
        spans[i].innerHTML=codes[i];
        spans[i].style.color =colors[Math.floor(Math.random()*10)];    //随机设置验证码颜色
       
    }

 
}
document.onload = validteCode();

上面这一段大家可以看到是用cookie存的验证码，而用span来显示出来，这里只是为了方便演示，用span当然是不可靠的，但是能用span我们也能通过其他的方式用在生成图片上面，用js生成图片的方法太多了，这里没有罗列这些技术。还有一个问题，那就是cookie的安全性考虑，好像不大轻易做到保密，但是其实可以使用一些保密算法来保证。这里只是提供一种思路，实用性方面不好做判断。