1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>验证码生成</title>
7 <style type="text/css">
8 #yz{
9 width: 150px;
10 height: 50px;
11 text-align: center;
12 line-height: 50px;
13 float: left;
14 letter-spacing: 5px;
15 font-size: 22px;
16 background-color: rgba(123,123,123,0.7);
17 }
18 button{
19 background-color: coral;
20 border-radius: 20px;
21 width: 100px;
22 height: 50px;
23 float: left;
24 cursor: pointer;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="yz"></div>
30 <button type="button" onclick="refresh()">刷新验证码</button>
31 <script type="text/javascript">
32 //定义验证码的内容
33 var str = "abcdefghijklmnopqrtuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
34 //使用split()方法将str字符串分割成一个数组且用空格隔开
35 var arr = str.split("");
36 //定义变量,存放验证码
37 var result = "";
38 //获取id为yz的元素
39 var yz = document.getElementById("yz");
40 for (var i = 0; i < 6; i++) {
41 //生成随机数
42 var n = Math.floor(Math.random() * arr.length);
43 //获取arr数组的内容
44 result += arr[n];
45 }
46 //将随机验证码输出id为yz的元素中
47 yz.innerText = result;
48 //定义刷新函数
49 function refresh(){
50 window.location.reload();
51 };
52 </script>
53 </body>
54 </html>
原文地址：https://www.cnblogs.com/erhei/p/9812778.html
时间： 2024-10-06 12:55:00