操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

驗證碼常被用來驗證當前操作是否由本人來進行。常見的驗證碼有短信驗證碼，圖文驗證碼js網頁驗證碼有什么用js網頁驗證碼有什么用，字母數字驗證碼等。今天 小編教你 JS 如何實現字母數字驗證碼。

我們先來看下效果：

具體代碼：

????
????
????

<script?type="text/javascript"?src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"?></script>
<script>

?$(function(){
??var?show_num?=?[];
??draw(show_num);
??$("#canvas").on('click',function(){
???draw(show_num);
??})
??$(".btn").on('click',function(){
???var?val?=?$(".input-val").val().toLowerCase();?//toLowerCase()函數將字符串中的所有字符轉為小寫。所以輸入框不區分大小寫。
???var?num?=?show_num.join("");
???if(val==''){
????alert('請輸入驗證碼！');
???}else?if(val?==?num){
????alert('提交成功！');
????$(".input-val").val('');
???}else{
????alert('驗證碼錯誤！請重新輸入！');
????$(".input-val").val('');
???}
??})

?})
?function?draw(show_num)?{//生成并渲染出驗證碼圖形
??var?canvas_width=$('#canvas').width();
??var?canvas_height=$('#canvas').height();
??var?canvas?=?document.getElementById("canvas");//獲取canvas
??var?context?=?canvas.getContext("2d");//獲取到canvas畫圖的環境
??canvas.width?=?canvas_width;
??canvas.height?=?canvas_height;
??var?sCode?=?"A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,1,2,3,4,5,6,7,8,9,0";
??var?aCode?=?sCode.split(",");
??var?aLength?=?aCode.length;//獲取到數組的長度
??for?(var?i?=?0;?i?
???var?j?=?Math.floor(Math.random()?*?aLength);//獲取到隨機的索引值
???var?deg?=?Math.random()?-?0.5;?//產生一個隨機弧度
???var?txt?=?aCode[j];//得到隨機的一個內容
???show_num[i]?=?txt.toLowerCase();
???var?x?=?10?+?i?*?20;//文字在canvas上的x坐標
???var?y?=?20?+?Math.random()?*?8;//文字在canvas上的y坐標
???context.font?=?"bold?24px?微軟雅黑";

???context.translate(x,?y);
???context.rotate(deg);
???context.fillStyle?=?randomColor();
???context.fillText(txt,?0,?0);
???context.rotate(-deg);
???context.translate(-x,?-y);
??}
??for?(var?i?=?0;?i?<=?5;?i++)?{?//驗證碼上顯示線條
???context.strokeStyle?=?randomColor();
???context.beginPath();
???context.moveTo(Math.random()?*?canvas_width,?Math.random()?*?canvas_height);
???context.lineTo(Math.random()?*?canvas_width,?Math.random()?*?canvas_height);
???context.stroke();
??}
??for?(var?i?=?0;?i?<=?20;?i++)?{?//驗證碼上的小點
???context.strokeStyle?=?randomColor();//隨機生成
???context.beginPath();
???var?x?=?Math.random()?*?canvas_width;
???var?y?=?Math.random()?*?canvas_height;

???context.moveTo(x,?y);
???context.lineTo(x?+?1,?y?+?1);
???context.stroke();
??}
?}
?function?randomColor()?{//得到隨機的顏色值
??var?r?=?Math.floor(Math.random()?*?256);
??var?g?=?Math.floor(Math.random()?*?256);
??var?b?=?Math.floor(Math.random()?*?256);
??return?"rgb("?+?r?+?","?+?g?+?","?+?b?+?")";
?}
</script>

????
????????
????????
????????驗證
????