关于javascript生成验证码
Posted erhei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于javascript生成验证码相关的知识，希望对你有一定的参考价值。
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生成验证码的主要内容，如果未能解决你的问题，请参考以下文章