原生JS写验证码

1.先创建一个一个输入框用来用户输入验证码和一个span容器用来存放系统给出的验证码和一个刷新按钮还有一个登录按钮

<input type="text" class="dl" id="sryzm"  /><br />
<span id="ysyzm"  style="color:white; font-weight:bolder; font-size:18px; min-width:70px"></span>
<input id="sxyzm" type="button" class="btn btn-default" value="刷新" style="font-weight:200" />
<input type="button" class="btn btn-default" id="btn" value="登录" style="font-weight:bolder" />

2.JS代码

 <script type="text/javascript">
 var ysyzm = "";//原始验证码
 var sryzm = "";//输入验证码
 $(document).ready(function(e) {//页面一加载完成就执行方法

     var str = "qgfh12kjQWFEfEW3EsaeWE544ssgW6GGGgu5mWEE6777EEWW7b67fec";
     var n = 5, s = "";
     for(var i = 0; i < n; i++){
         var rand = Math.floor(Math.random() * str.length);

         s += str.charAt(rand);
     }
     $("#ysyzm").html(s);
     ysyzm = s;

     $("#sxyzm").click(function(){//给刷新按钮加点击事件

                 s="";

                 for(var i = 0; i < n; i++){
                 var rand = Math.floor(Math.random() * str.length);//指定选取位置
                 s += str.charAt(rand);//指定选取字符

                 /*random() 方法可返回介于 0 ~ 1 之间的一个随机数。
                 Math.floor 数学函数，求一个浮点数的地板，就是求一个最接近它的整数，它的值小于或等于这个浮点数。
                 charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法.
                 charAt()方法返回指定索引位置的char值。索引范围为0~length()-1.
                 如: str.charAt(0)检索str中的第一个字符,str.charAt(str.length()-1)检索最后一个字符.*/

                 }
                 $("#ysyzm").html(s);
                 ysyzm = s;

         });

     $("#btn").click(function(){//给登录按钮加点击事件
             sryzm =  $("#sryzm").val();
             //取用户名和密码
             var a = $("#uid").val();
             var b = $("#pwd").val();
             var aa = ysyzm.toLowerCase();//为了实现输入时不区分大小写，在进行比较时把原始验证码和输入验证码都转成小写字母即可
             var bb = sryzm.toLowerCase();
             if(aa==bb)//两个验证码进行比较，若相同时，则执行以下代码
             {alert(123)}

注：未经允许，禁止转载