码迷,mamicode.com
首页 > 编程语言 > 详细

关于javascript生成验证码

时间:2018-10-18 20:16:04      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:doc   code   inter   验证   cin   pointer   ntb   char   htm   

 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>

 

关于javascript生成验证码

标签:doc   code   inter   验证   cin   pointer   ntb   char   htm   

原文地址:https://www.cnblogs.com/erhei/p/9812778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!