原生JS写验证码

Posted 2020-09-11 5572

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代码

 1 <script type="text/javascript">
 2 var ysyzm = "";//原始验证码
 3 var sryzm = "";//输入验证码
 4 $(document).ready(function(e) {//页面一加载完成就执行方法
 5     
 6     var str = "qgfh12kjQWFEfEW3EsaeWE544ssgW6GGGgu5mWEE6777EEWW7b67fec";
 7     var n = 5, s = "";
 8     for(var i = 0; i < n; i++){
 9         var rand = Math.floor(Math.random() * str.length);
10         
11         s += str.charAt(rand);
12     }
13     $("#ysyzm").html(s);
14     ysyzm = s;
15     
16     $("#sxyzm").click(function(){//给刷新按钮加点击事件
17                 
18                 s="";
19                 
20                 for(var i = 0; i < n; i++){
21                 var rand = Math.floor(Math.random() * str.length);//指定选取位置
22                 s += str.charAt(rand);//指定选取字符
23                 
24                 /*random() 方法可返回介于 0 ~ 1 之间的一个随机数。
25                 Math.floor 数学函数，求一个浮点数的地板，就是求一个最接近它的整数，它的值小于或等于这个浮点数。
26                 charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法.
27                 charAt()方法返回指定索引位置的char值。索引范围为0~length()-1.
28                 如: str.charAt(0)检索str中的第一个字符,str.charAt(str.length()-1)检索最后一个字符.*/
29                 
30                 }
31                 $("#ysyzm").html(s);
32                 ysyzm = s;
33         
34         });
35     
36     
37     
38     $("#btn").click(function(){//给登录按钮加点击事件
39             sryzm =  $("#sryzm").val();
40             //取用户名和密码
41             var a = $("#uid").val();
42             var b = $("#pwd").val();
43             var aa = ysyzm.toLowerCase();//为了实现输入时不区分大小写，在进行比较时把原始验证码和输入验证码都转成小写字母即可
44             var bb = sryzm.toLowerCase();
45             if(aa==bb)//两个验证码进行比较，若相同时，则执行以下代码
46             {alert(123)}