關於javascript生成驗證碼
阿新 • • 發佈：2018-10-18
函數 onclick cor style class 元素 font button win
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 } 18button{ 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生成驗證碼