JS Generate verification Code

Html

<! DOCTYPE html>
 
Javascript
 
<script type= "Text/javascript" > //randomly generated number function getrandomstr (len) {     var text =  ";    var possible = " ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";     for ( var i=0 ; i < len; i++ )         text +=  Possible.charat (Math.floor (Math.random ()  * possible.length));    return  text;} Melon Layer (function (bodystyle)  {bodyStyle.mozUserSelect =  ' None '; bodystyle.webkituserselect =   ' None ';var  $canvas  = $ (". Canvas"); var movetime, canvastop = $ Canvas.offset (). Top; $canvas. attr ("Data-flag",  "true");var u = navigator.useragent,  mobile =  ';if  (u.indexof (' Windows ')  > -1) mobile =  ' PC ';if  ( U.indexof (' IPhone ')  > -1) mobile =  ' iphone ';if  (U.indexof (' 534 ')  > -1 && u.indexof (' Linux ')  >  -1) mobile =  ' Android_pa '; var img = new image (); var canvas =  document.queryselector (' canvas ');canvas.style.backgroundcolor =  ' Transparent ';if  (mobile  !=  "iphone"  && mobile !=  "PC"  && mobile ==  "Android_pa")  {canvas.style.position =  ' absolute ';} Img.addeventlistener (' Load ',  function (e)  {var ctx;var w = 270, h =  140;var mousedown = false;//Render Canvas Function layer (CTX)  {//gray area ctx.fillstyle =   ' #ccc '; Ctx.fillrect (0, 0, w, h);//The Word ctx.font =  "on the area" bold 50px arial  red "; ctx.textalign = " left ";ctx.fillstyle = " #aaa " ctx.filltext (" Scratch zone ", &NBSP;50,&NBSP;80);  }function eventdown (e)  {e.preventdeFault ();if  (mobile !=  "iphone"  && mobile !=  "PC" &&  mobile ==  "Android_pa")  {clearinterval (Movetime); Movetime = setinterval (function ()  {if  ($canvas. attr ("Data-flag")  ==  "true")  {canvasTop--; $canvas. attr ("Data-flag",   "false");}  else {canvasTop++; $canvas. attr ("Data-flag",  "true");} $canvas. CSS ("top",  canvastop);}, 10);} Mousedown = true;} Function eventup (e) {e.preventdefault (); clearinterval (movetime); mousedown = false;var data  = ctx.getimagedata (0, 0, w, h) .data;for  (var i = 0, j  = 0; i < data.length; i += 4)  {if  (data[i] &&  data[i + 1] && data[i + 2] && data[i + &NBSP;3])  {j++;}} if  ((j <= w * h * 0.5)  && $ ("#test"). attr ("Data-rel")) {//The remaining 10% area tip information $ ("#test"). HTML ("Congratulations, winning!"). "); $ (" #test "). attr (" Data-rel ", " false ");}} Function eventmove (e)  {e.preventdefault ();if  (MouseDown)  {if  (e.changedtouches)   {e = e.changedtouches[e.changedtouches.length - 1];} var x = e.pagex - this.offsetleft;var y = e.pagey -  this.offsettop;with  (CTX)   {beginpath (); Arc (x, y, 30, 0, math.pi *  2,true);//Set Smudge size fill (); }}}canvas.width = w;canvas.height = h;ctx =  Canvas.getcontext (' 2d '); /*ctx.fillstyle =  ' yellow '; Ctx.fillrect (0, 0, w, h);   */   //draws a new layer and sets it to the background     s   ctx.save ();        var fontSize = 36;        ctx.font =  '  Bold  ' &NBSP;+&Nbsp;fontsize +  ' Px consolas ';        ctxtextalign =   ' center ';       ctx.fillstyle =  ' #60f ';        ctx.filltext (GETRANDOMSTR), this.width /8, this.height/2   +&NBSP;FONTSIZE&NBSP;/&NBSP;2);        ctx.restore ();        //draw a new layer and set it as background    e                var data = canvas.todataurl ("Image/png"); canvas.style.backgroundimage =  ' url ('  + data +  ') '; Ctx.clearrect (0,0,this.width, This.height);//clear the ghosting layer (CTX);//execute function ctx.globalcompositeoperation =  ' destination-out '; Canvas.addeventlistener (' Touchstart ',  eventdown); Canvas.addeventlistener (' Touchend ',  eventUp); Canvas.addeventlistener (' Touchmove ',  eventmove), canvas.AddEventListener (' MouseDown ',  eventdown); Canvas.addeventlistener (' MouseUp ',  eventup); Canvas.addeventlistener (' MouseMove ',  eventmove);}); /  Show Picture img.src= "Canvas-bg.png";}) (Document.body.style);</script>
 

JS Generate verification Code