JS驗證碼生成（入門級別）
阿新 • • 發佈：2018-06-05
mage default etc 更換 默認 function asc col lineto
練手項目：JavaScript驗證碼
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 #mycanvas { 9 cursor: pointer; 10 } 11 </style> 12 </head> 13 <!--值得優化的地方：①幹擾線的隨機顏色；②可以加點幹擾點--> 14 <body> 15 <canvas id="mycanvas" width=‘90‘ height=‘40‘> 16 您的瀏覽器不支持canvas，請換個瀏覽器試試~ 17 </canvas> 18 </body> 19 20 <script> 21 /*生成4位隨機數*/ 22 function rand() { 23 varstr = "abcdefghijklmnopqrstuvwxyz0123456789"; 24 var arr = str.split(""); 25 var validate = ""; 26 var ranNum; 27 for(var i = 0; i < 4; i++) { 28 ranNum = Math.floor(Math.random() * 36); //隨機數在[0,35]之間 29 validate += arr[ranNum];30 } 31 return validate; 32 } 33 34 /*幹擾線的隨機x坐標值*/ 35 function lineX() { 36 var ranLineX = Math.floor(Math.random() * 90); 37 return ranLineX; 38 } 39 40 /*幹擾線的隨機y坐標值*/ 41 function lineY() { 42 var ranLineY = Math.floor(Math.random() * 40); 43 return ranLineY; 44 } 45 46 function clickChange() { 47 var mycanvas = document.getElementById(‘mycanvas‘); 48 var cxt = mycanvas.getContext(‘2d‘); 49 cxt.fillStyle = ‘#000‘; 50 cxt.fillRect(0, 0, 90, 40); 51 52 /*生成幹擾線20條*/ 53 for(var j = 0; j < 30; j++) { 54 cxt.strokeStyle = ‘#fff‘; 55 cxt.beginPath(); //若省略beginPath，則每點擊一次驗證碼會累積幹擾線的條數 56 cxt.moveTo(lineX(), lineY()); 57 cxt.lineTo(lineX(), lineY()); 58 cxt.lineWidth = 0.5; 59 cxt.closePath(); 60 cxt.stroke(); 61 } 62 63 cxt.fillStyle = ‘yellow‘; 64 cxt.font = ‘bold 20px Arial‘; 65 cxt.fillText(rand(), 30, 30); //把rand()生成的隨機數文本填充到canvas中 66 } 67 68 clickChange(); 69 70 /*點擊驗證碼更換*/ 71 mycanvas.onclick = function(e) { 72 e.preventDefault(); //阻止鼠標點擊發生默認的行為 73 clickChange(); 74 }; 75 </script> 76 77 </html>
結果顯示截圖：
JS驗證碼生成（入門級別）