Shulou(Shulou.com)06/01 Report--

This article mainly introduces JS how to achieve CAPTCHA, the article introduces in great detail, has a certain reference value, interested friends must read it!

Specific code:

The CAPTCHA-(yisu.com) .input-val {width: 150px; height: 30px; border: 1px solid # ddd; box-sizing: border-box;/*box-sizing attribute allows you to define certain elements in some way to suit the specified area. The * /} # canvas {vertical-align: middle;/*vertical-align attribute sets the vertical alignment of an element. * / box-sizing: border-box; border: 1px solid # ddd; cursor: pointer;} .btn {display: block; margin-top: 10px; height: 30px; width: 80px; font-size: 16px; color: # fff; background-color: # 409EFE; border: 1px solid # EBEDEF; border-radius: 50px;} $(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 () function lowercase all characters in the string. So the input box is not case-sensitive. Var num = show_num.join (""); if (val=='') {alert ('Please enter the CAPTCHA!') ;} else if (val = = num) {alert ('submitted successfully!') ; $(".input-val") .val ('');} else {alert ('CAPTCHA error! Please re-enter!') ; $(".input-val") .val ('')}) function draw (show_num) {/ / generate and render the CAPTCHA graphic var canvas_width=$ ('# canvas'). Width (); var canvas_height=$ ('# canvas'). Height (); var canvas = document.getElementById ("canvas"); / / get canvas var context = canvas.getContext ("2d"); / / get the environment canvas.width = canvas_width for canvas drawing Canvas.height = canvas_height; var sCode = "A forerunner, Brecincter, Crecincter, canvas_height; var sCode, Greco, Jrek, repartee, paramedicum, etc. Var aLength = aCode.length;// gets the length of the array for (var I = 0; I < 4; iTunes +) {/ / the for loop here can control the number of verification code points var j = Math.floor (Math.random () * aLength); / / get the random index value var deg = Math.random ()-0.5; / / generate a random Radian var txt = aCode [j] / / get a random content show_ Num [I] = txt.toLowerCase (); var x = 10 + I * 20ram / the x coordinates of the text on canvas var y = 20 + Math.random () * 8context.font / the y coordinates of the text on canvas context.font = "bold 24px Microsoft Yahei"; 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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.