原生JS写验证码

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

<input type="text" class="dl" id="sryzm"  /><br />
<span id="ysyzm"  style="color:white; font-weight:bolder; font-size:18px; min-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)}

注：未经允许，禁止转载