1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
9 <title>前端验证码功能</title>
10 <style>
11 *{
12 margin: 0;
13 padding: 0;
14 }
15 body{
16 background: rgba(0, 0, 0, .1);
17 /* background: #061227; */
18 }
19 form{
20 width: 600px;
21 margin: 100px auto;
22 }
23 .box{
24 height: 40px;
25 line-height: 40px;
26 }
27 .tip{
28 float: left;
29 }
30 input{
31 float: left;
32 width: 200px;
33 height: 30px;
34 padding: 3px 10px;
35 line-height: 30px;
36 }
37 #identify{
38 float: left;
39 width: 100px;
40 height: 40px;
41 line-height: 40px;
42 font-weight: bold;
43 text-align: center;
44 letter-spacing: 2px;
45 background: #365c64;
46 color: #fff;
47 border-radius: 5px;
48 margin: 0 10px;
49 }
50 .btn{
51 margin: 25px auto;
52 }
53 .btn button{
54 width: 200px;
55 height: 36px;
56 line-height: 36px;
57 background: #409eff;
58 border-radius: 5px;
59 border: 0;
60 color: #fff;
61 }
62 </style>
63 </head>
64
65 <body>
66 <form action="">
67 <div class="box">
68 <span class="tip">验证码：</span>
69 <input type="text" id="text" value="" placeholder="请输入验证码" autocomplete="off">
70 <span id="identify" onclick="generatedCode()"></span>
71 <a href="javascript:void(0)" onclick="generatedCode()">看不清，换一张</a>
72 </div>
73 <div class="btn"><button onclick="checkCode()">验证</button></div>
74 </form>
75 </body>
76 <script>
77 generatedCode();
78 // 随机生成验证码
79 function generatedCode() {
80 var code1 = "";//生成的验证码
81 var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
82 for (let i = 0; i < 4; i ) {
83 var index = Math.floor(Math.random() * 36);//随机0-35
84 code1 = array[index];
85 document.getElementById("identify").innerHTML = code1;
86 }
87 console.log("二维码是：",code1)
88 };
89 // 验证用户输入
90 function checkCode() {
91 var code2 = document.getElementById("identify").innerHTML;//获取当前生成的验证码
92 code2 = code2.toUpperCase();
93
94 var code3 = document.getElementById("text").value; //客户输入的验证码
95 code3 = code3.toUpperCase();//把客户输入的验证码转换为大写
96 console.log("生成的二维码是:" code2 "\n用户输入的验证码是:" code3)
97
98 if (code2 === code3) {
99 alert("恭喜验证成功");
100 // window.open('http://www.baidu.com');
101 } else {
102 alert("输入的验证码不正确");
103 code3 = "";//清空用户输入
104 }
105 }
106 </script>
107 </html>更多专业前端知识，请上 【猿2048】www.mk2048.com