一、HTML5的驗證碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>驗證碼</title> <style type="text/css"> #canvas{ cursor:pointer; } </style> </head> <body> <canvas id="canvas" width="150px" height="50px"></canvas> <script> //生成隨機數 function randomNum(min,max){ return Math.floor(Math.random()*(max-min)+min); } //生成隨機顏色RGB分量 function randomColor(min,max){ var _r = randomNum(min,max); var _g = randomNum(min,max); var _b = randomNum(min,max); return "rgb("+_r+","+_g+","+_b+")"; } //先阻止畫布默認點擊發生的行為再執行drawPic()方法 document.getElementById("canvas").onclick = function(e){ e.preventDefault(); drawPic(); }; function drawPic(){ //獲取到元素canvas var $canvas = document.getElementById("canvas"); var _str = "0123456789";//設置隨機數庫 var _picTxt = "";//隨機數 var _num = 4;//4個隨機數字 var _width = $canvas.width; var _height = $canvas.height; var ctx = $canvas.getContext("2d");//獲取 context 對象 ctx.textBaseline = "bottom";//文字上下對齊方式--底部對齊 ctx.fillStyle = randomColor(180,240);//填充畫布顏色 ctx.fillRect(0,0,_width,_height);//填充矩形--畫畫 for(var i=0; i<_num; i++){ var x = (_width-10)/_num*i+10; var y = randomNum(_height/2,_height); var deg = randomNum(-45,45); var txt = _str[randomNum(0,_str.length)]; _picTxt += txt;//獲取一個隨機數 ctx.fillStyle = randomColor(10,100);//填充隨機顏色 ctx.font = randomNum(16,40)+"px SimHei";//設置隨機數大小，字體為SimHei ctx.translate(x,y);//將當前xy坐標作為原始坐標 ctx.rotate(deg*Math.PI/180);//旋轉隨機角度 ctx.fillText(txt, 0,0);//繪制填色的文本 ctx.rotate(-deg*Math.PI/180); ctx.translate(-x,-y); } for(var i=0; i<_num; i++){ //定義筆觸顏色 ctx.strokeStyle = randomColor(90,180); ctx.beginPath(); //隨機划線--4條路徑 ctx.moveTo(randomNum(0,_width), randomNum(0,_height)); ctx.lineTo(randomNum(0,_width), randomNum(0,_height)); ctx.stroke(); } for(var i=0; i<_num*10; i++){ ctx.fillStyle = randomColor(0,255); ctx.beginPath(); //隨機畫原，填充顏色 ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI); ctx.fill(); } return _picTxt;//返回隨機數字符串 } drawPic(); </script> </body> </html>
二、JS的驗證碼
//頁面加載時，生成隨機驗證碼 window.onload=function(){ createCode(4); } //生成驗證碼的方法 function createCode(length) { var code = ""; var codeLength = parseInt(length); //驗證碼的長度 var checkCode = document.getElementById("checkCode"); ////所有候選組成驗證碼的字符，當然也可以用中文的 var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //循環組成驗證碼的字符串 for (var i = 0; i < codeLength; i++) { //獲取隨機驗證碼下標 var charNum = Math.floor(Math.random() * 62); //組合成指定字符驗證碼 code += codeChars[charNum]; } if (checkCode) { //為驗證碼區域添加樣式名 checkCode.className = "code"; //將生成驗證碼賦值到顯示區 checkCode.innerHTML = code; } } //檢查驗證碼是否正確 function validateCode() { //獲取顯示區生成的驗證碼 var checkCode = document.getElementById("checkCode").innerHTML; //獲取輸入的驗證碼 var inputCode = document.getElementById("inputCode").value; //console.log(checkCode); //console.log(inputCode); if (inputCode.length <= 0) { alert("請輸入驗證碼！"); } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) { alert("驗證碼輸入有誤！"); createCode(4); } else { alert("驗證碼正確！"); } }