JavaScript script instance with rotation + line interference _javascript tips

Basic version

From our usual experience in the Internet, the verification code is generally four digits, composed of numbers and letters.
Then the landlord will lead us step-by-step with JavaScript to make a verification code script!
First give the finished product, easy to understand:

<!
      DOCTYPE html>  

1. Since it's a four-bit captcha, we're going to have to open up some of our ideas, first we need an array to store letters and numbers.

 var code=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 ';

2. Then we need to let it randomly display the elements in the array, here we create a Codenumber variable to randomly display the number, but we need four-bit captcha, and now the elements in the array are single, how to do? Simple! Let's build a Securitycode variable to store the elements in the array. The code is as follows:

 var Codenumber;
      Securitycode= "" "//global variable for subsequent validation for
      (Var i=0;i<4;i++) {
        Codenumber=math.floor (math.random () *36);
        Securitycode+=code[codenumber];
      }

You can see that at this point the Securitynumber variable stores a four-bit random authentication code
3. Well, after a simple two-step, we get a four-bit captcha. We put it in a createcode function.

function Createcode () {
      var code=new Array (0,1,2,3,4,5,6,7,8,9,
          ' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' I ', ' J ', ' I ', ') ', ' K ', ' L ', ' M ', ' N ', ' O ', ' P ', ' Q ', ' R ', ' S ', ' T ', ' U ', ' V ', ' W ', ' X ', ' Y ', ' Z ';
      var Codenumber;
      Securitycode= "" "//global variable for subsequent validation for
      (Var i=0;i<4;i++) {
        Codenumber=math.floor (math.random () *36);
        Securitycode+=code[codenumber];
      }
      document.getElementById ("Securitycode"). Value=securitycode
    }

4. Next we create a validation mechanism:

 function Verify () {
      var Entercode=document.getelementbyid ("Entercode"). Value;
      if (Entercode.touppercase () ==securitycode) {
        alert ("Input correct, validate!");
      }
      else{
        entercode.value= "";
        Createcode ();
      }
    

5. A small decoration of the Verification Code:

 <style>
    #securityCode {
      background-color: #008000;
      width:70px;
      height:30px;
      font-family: ' italics ', serif;
      font-size:20px;
      Color:white;
    }
  </style>

Advanced: Further stop the robot's superior skills
most of the projects contacted, the verification code is always backstage, these two days just have a page need to verify the code, the time to realize the background, but suddenly I think most of the project seems to be not very high security requirements, but also a bit to prevent the skills of the robot, so the front-end wrote a verification code. and using the CSS3 transform attribute in the rotate set rotation, and then randomly to get the interference line, and finally in order to add a layer of opacity=0 div above all DOM nodes, a front-end verification code comes out.

Vcode Code:

(function () {var randstr = function (length) {var key = {str: [' A], ' B ', ' C ', ' d ', ' e ', ' f ', ' g ', ' h ', ' I ', ' j ', ' K ', ' l ', ' m ', ' o ', ' P ', ' Q ', ' R ', ' s ', ' t ', ' x ', ' u ', ' V ', ' y ', ' z ', ' w ', ' n ', ' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 '
        ', ' 9 '], randint:function (n,m) {var c = m-n+1;
        var num = math.random () * c + N;
      return Math.floor (num);
        }, Randstr:function () {var _this = this;
        var leng = _this.str.length-1;
        var randkey = _this.randint (0, Leng);
      return _this.str[randkey];
        }, Create:function (len) {var _this = this; var L = Len | |
        10;
 
        var str = ';
        for (var i = 0; i<l i++) {str + _THIS.RANDSTR ();
      return str;
 
    }
 
    }; Length = length?
 
    Length:10;
  return key.create (length);
 
  };
    var randint = function (n,m) {var c = m-n+1;
    var num = math.random () * c + N; Return Math.floor(num);
 
  };
    var vcode = function (DOM, options) {this.codedoms = [];
    This.linedoms = [];
    This.initoptions (options);
    This.dom = dom;
    This.init ();
    This.addevent ();
    This.update ();
  This.mask ();
 
  };
    VCode.prototype.init = function () {this.dom.style.position = "relative";
    This.dom.style.overflow = "hidden";
    This.dom.style.cursor = "pointer";
    This.dom.title = "Click to replace the verification Code";
    This.dom.style.background = This.options.bgColor;
    THIS.W = This.dom.clientWidth;
    This.h = This.dom.clientHeight;
  This.uw = This.w/this.options.len;
 
  };
    VCode.prototype.mask = function () {var dom = document.createelement ("div"); Dom.style.cssText = ["width:100%", "height:100%", "left:0", "top:0", "Position:absolut
 
    E "," Cursor:pointer "," z-index:9999999 "].join ("; ");
 
    Dom.title = "Click to replace the verification Code";
  This.dom.appendChild (DOM);
 
  }; VCode.prototype.addEvent = function () {var _this =This
    _this.dom.addeventlistener ("click", Function () {_this.update.call (_this);
  });
 
  };
      vCode.prototype.initOptions = function (options) {var f = function () {This.len = 4;
      This.fontsizemin = 20;
      This.fontsizemax = 48;
      This.colors = ["Green", "Red", "Blue", "#53da33", "#AA0000", "#FFBB00"
      ];
      This.bgcolor = "#FFF";
        this.fonts = ["Times New Roman", "Georgia", "Serif", "Sans-serif", "Arial",
      "Tahoma", "Hiragino Sans GB"];
      This.lines = 8;
 
      This.linecolors = ["#888888", "#FF7744", "#888800", "#008888"];
      This.lineheightmin = 1;
      This.lineheightmax = 3;
      This.linewidthmin = 1;
    This.linewidthmax = 60;
 
    };
 
    This.options = new F ();
      if (typeof options = = "Object") {for (I in Options) {this.options[i] = options[i]; }
    }
  }; VCode.prototype.update = function () {for (var i=0; i<this.codedoms.length; i++) {this.dom.removeChild (this.cod
    Edoms[i]);
    for (var i=0 i<this.linedoms.length; i++) {this.dom.removeChild (this.linedoms[i]);
    } this.createcode ();
  This.draw ();
 
  };
  VCode.prototype.createCode = function () {This.code = Randstr (This.options.len);
 
  };
  vCode.prototype.verify = function (code) {return This.code = = = Code;
 
  };
    VCode.prototype.draw = function () {this.codedoms = [];
    for (var i=0; i<this.code.length; i++) {This.codeDoms.push (This.drawcode (this.code[i), i));
  } this.drawlines ();
 
  };
 
    VCode.prototype.drawCode = function (Code, index) {var dom = document.createelement ("span"); Dom.style.cssText = ["font-size:" + randint (this.options.fontSizeMin, This.options.fontSizeMax) + "px", "Colo R: "+ this.options.colors[randint (0, This.options.colors.length-1)]," Position:absoluTe "," Left: "+ randint (THIS.UW * index, THIS.UW * index + this.uw-10) +" px "," Top: "+ randint (0, this.h-3 0) + "px", "transform:rotate (" + randint ( -30) + "deg") ","-ms-transform:rotate ("+ randint ( -30) +" deg) ","-moz-transform:rotate ("+ randint ( -30) +" deg) ","-webkit-transform:rotate ("+ randint ( -30) +" deg ","-o-transform:rotate ("+ randint ( -30) +" deg) "," font-family: "+ this.options.fonts[randint (0, This.op
 
    TIONS.FONTS.LENGTH-1)], "font-weight:" + randint (900)].join (";");
    dom.innerhtml = code;
 
    This.dom.appendChild (DOM);
  return DOM;
 
  };
    VCode.prototype.drawLines = function () {this.linedoms = [];
 
      for (var i=0; i<this.options.lines; i++) {var dom = document.createelement ("div"); Dom.style.cssText = ["Position:absolute", "opacity:" + randint (3, 8)/Ten, "width:" + randint (t His.options.lineWidthMin, This.options.lineWidthMax)+ "px", "Height:" + randint (this.options.lineHeightMin, This.options.lineHeightMax) + "px", "background:" + this.options.linecolors[randint (0, This.options.linecolors.length-1)], "Left:" + randint (0, this.w-20) + "p X "," Top: "+ randint (0, This.h) +" px "," transform:rotate ("+ randint ( -30) +" deg) ","-ms-tran Sform:rotate ("+ randint ( -30) +" deg) ","-moz-transform:rotate ("+ randint ( -30) +" deg) ","-webkit -transform:rotate ("+ randint ( -30) +" deg) ","-o-transform:rotate ("+ randint ( -30) +" deg) "," Font
      -family: "+ this.options.fonts[randint (0, This.options.fonts.length-1)]," font-weight: "+ randint (400, 900)
      ].join (";");
 
      This.dom.appendChild (DOM);
    This.lineDoms.push (DOM);
 
  }
  };
 
This.vcode = Vcode;

 ). Call (this);

Usage:

Container is the DOM node of the CAPTCHA code
= new Vcode (container);
 
Verify
that the correct//Inputcode Authentication Code code.verify (Inputcode) for the user is entered
;//return TRUE or False